서버사이드 렌더링 (1)

리린·2021년 8월 2일

서버사이드 렌더링

목록 보기

2/5

빌드된 파일(.js, .css ..) 적용하기

build/asset-manifest.json

{
  "files": {
    "main.css": "/static/css/main.dc9f71ec.chunk.css",
    "main.js": "/static/js/main.0632453c.chunk.js",
    "main.js.map": "/static/js/main.0632453c.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.3b3a7e99.js",
    "runtime-main.js.map": "/static/js/runtime-main.3b3a7e99.js.map",
    "static/js/2.f37e4ec8.chunk.js": "/static/js/2.f37e4ec8.chunk.js",
    "static/js/2.f37e4ec8.chunk.js.map": "/static/js/2.f37e4ec8.chunk.js.map",
    "index.html": "/index.html",
    "static/css/main.dc9f71ec.chunk.css.map": "/static/css/main.dc9f71ec.chunk.css.map",
    "static/js/2.f37e4ec8.chunk.js.LICENSE.txt": "/static/js/2.f37e4ec8.chunk.js.LICENSE.txt"
  },
  "entrypoints": [
    "static/js/runtime-main.3b3a7e99.js",
    "static/js/2.f37e4ec8.chunk.js",
    "static/css/main.dc9f71ec.chunk.css",
    "static/js/main.0632453c.chunk.js"
  ]
}

위 파일의
main.css
main.js
runtime-main.js
static/js/2.7980f885.chunk.js
를

html내부(index.server.js에서 생성하는 페이지)에 삽입하기

서버사이드 렌더링

src/ index.server.js

import React from "react";
import ReactDOMServer from "react-dom/server";
import express from "express";
import { StaticRouter } from "react-router-dom";
import App from "./App";
import path from "path";
import fs from "fs";

const manifest = JSON.parse(
  fs.readFileSync(path.resolve("./build/asset-manifest.json"), "utf8")
);

const chunks = Object.keys(manifest.files)
  .filter((key) => /chunk\.js$/.exec(key)) //chunk.js 로 끝나는 키를 찾아서
  .map((key) => `<script src="$manifest.files[key]"></script>`) //스크립트 태그로 변환하고
  .join(""); //합쳐

function createPage(root) {
  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>
 <link href="${manifest.files["main.css"]}" rel="stylesheet"/>
 </head>
 <body>
 <noscript>You need to enable js to run this app</noscript>
 <div id="root">
 ${root}
 </div>
 <script src="${manifest.files["runtime-main.js"]}"></script>
 ${chunks}
 <script src="${manifest.files["main.js"]}"></script>
 </body>
 </html> `;
}
const app = express();

//서버사이드 렌더링을 처리할 핸들러 함수

const serverRender = (req, res, next) => {
  // 404를 띄우는 상황이 와도 서버사이드렌더링을 해줌
  const context = {};
  const jsx = (
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const root = ReactDOMServer.renderToString(jsx);
  res.send(createPage(root));
};

const serve = express.static(path.resolve("./build"), {
  index: false,
});
app.use(serve);
app.use(serverRender);

app.listen(5000, () => {
  console.log("Running on http://localhost:5000");
});