20.5.3 필요한 청크 파일 경로 추출하기
서버 사이드 렌더링 후 브라우저에서 어떤 파일을 사전에 불러와야 할지 알아내고 해당 파일들의 경로를 추출하기 위해 Loadable Components에서 제공하는 ChunkExtractor와 ChunkExtractorManager를 사용합니다.
서버 엔트리 코드는 다음과 같이 수정해 보세요.
이제 Loadable Components를 통해 파일 경로를 조회하므로 기존에 asset-manifest.json을 확인하던 코드는 지워 줍니다.
index.server.js
(...) import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'; const statsFile = path.resolve('./build/loadable-stats.json'); function createPage(root, tags) { return `<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> <title>React App</title> ${tags.styles} ${tags.links} </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"> ${root} </div> ${tags.scripts} </body> </html> `; } const app = express(); // 서버 사이드 렌더링을 처리할 핸들러 함수입니다. const serverRender = async (req, res, next) => { // 이 함수는 404가 떠야 하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 해 줍니다. const context = {}; const sagaMiddleware = createSagaMiddleware(); const store = createStore( rootReducer, applyMiddleware(thunk, sagaMiddleware) ); const sagaPromise = sagaMiddleware.run(rootSaga).toPromise(); const preloadContext = { done: false, promises: [] }; // 필요한 파일을 추출하기 위한 ChunkExtractor const extractor = new ChunkExtractor({ statsFile }); const jsx = ( <ChunkExtractorManager extractor={extractor}> <PreloadContext.Provider value={preloadContext}> <Provider store={store}> <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> </Provider> </PreloadContext.Provider> </ChunkExtractorManager> ); ReactDOMServer.renderToStaticMarkup(jsx); // renderToStaticMarkup으로 한번 렌더링합니다. store.dispatch(END); // redux-saga의 END 액션을 발생시키면 액션을 모니터링하는 사가들이 모두 종료됩니다. try { await sagaPromise; // 기존에 진행 중이던 사가들이 모두 끝날 때까지 기다립니다. await Promise.all(preloadContext.promises); // 모든 프로미스를 기다립니다. } catch (e) { return res.status(500); } preloadContext.done = true; const root = ReactDOMServer.renderToString(jsx); // 렌더링을 합니다. // JSON을 문자열로 변환하고 악성 스크립트가 실행되는 것을 방지하기 위해 <를 치환 처리 // https://redux.js.org/recipes/server-rendering#security-considerations const stateString = JSON.stringify(store.getState()).replace(/</g, '\\u003c'); const stateScript = `<script>_ _PRELOADED_STATE_ _ = ${stateString}</script>`; // 리덕스 초기 상태를 스크립트로 주입합니다. // 미리 불러와야 하는 스타일/스크립트를 추출하고 const tags = { scripts: stateScript + extractor.getScriptTags(), // 스크립트 앞부분에 리덕스 상태 넣기 links: extractor.getLinkTags(), styles: extractor.getStyleTags() }; res.send(createPage(root, tags)); // 결과물을 응답합니다. }; (...)