[javascript] ReactJS 서버 측 렌더링 대 클라이언트 측 렌더링

응용 프로그램을 빌드하는 두 가지 방법입니까, 아니면 함께 사용할 수 있습니까?

함께 사용할 수 있습니다.

함께 사용할 수 있다면 어떻게해야합니까? 서버 측과 클라이언트 측에서 동일한 요소를 복제해야합니까? 또는 이미 미리 렌더링 된 서버 측에 연결하지 않고 서버에 애플리케이션의 정적 부분을 구축하고 클라이언트 측에 동적 부분을 구축 할 수 있습니까?

리플 로우 및 리 페인트 작업을 방지하고 깜박임 / 깜박임을 줄이려면 동일한 레이아웃을 렌더링하는 것이 좋습니다. 페이지가 더 부드러워집니다. 그러나 제한이 아닙니다. SSR html ( Electrode 가 응답 시간을 줄이기 위해 하거나 CSR (클라이언트 측 렌더링)에 의해 덮어 쓰여지는 정적 html을 보낼 수 있습니다.

SSR로 시작하는 경우 간단하게 시작하는 것이 좋습니다. SSR은 매우 빠르게 복잡해질 수 있습니다. 서버에서 html을 빌드한다는 것은 창, 문서 (클라이언트에 있음)와 같은 객체에 대한 액세스 권한을 잃고 비동기 작업을 통합하는 기능 (즉시 사용 가능)을 잃고 일반적으로 코드 SSR과 호환되도록 많은 코드 편집을 수행하는 것을 의미합니다 ( bundle.js를 포장하려면 webpack을 사용해야하므로). CSS 가져 오기와 같은 것들은 갑자기 당신을 물기 시작합니다 (웹팩이없는 기본 React 앱에서는 그렇지 않습니다).

SSR의 일반적인 패턴은 다음과 같습니다. 요청을 처리하는 Express 서버 :

const app = Express();
const port = 8092;

// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);

    const urlToRender = req.url;
    // Render the component to a string
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={{}}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

SSR로 시작하는 사람들에게 내 제안은 정적 HTML을 제공하는 것입니다. CSR SPA 앱을 실행하여 정적 HTML을 가져올 수 있습니다.

document.getElementById('root').innerHTML

잊지 마세요. SSR을 사용하는 유일한 이유는 다음과 같습니다.

1. SEO
2. 더 빠른로드 (저는 이것을 할인합니다)

해킹 : https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

답변