[프론트엔드] 서버 사이드 랜더링[5]

 

3. 서버 사이드 렌더링 구현하기

 

3.5  정적 파일 제공하기

 

이번에는 Express에 내장ㅇ되어 있는 static 미들웨어를 사용하여 서버를 통해서 build에 있는 JS, CSS  정적 파일들에 접근할 수 있도록 처리해 하겠습니다. 

 

 

 

- 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";

// express 선언
const app = express();

// 서버 사이드 렌더링 처리를 위한 핸들러 함수
const serverRender = (req, res, next) => {
  // 이 함수는 HTTP 404가 발생하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 처리해줌

  const context = {};
  const jsx = (
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  // 랜더링 처리 후 클라에게 결과를 리턴
  const root = ReactDOMServer.renderToString(jsx);
  res.send(root);
};

const serve = express.static(path.resolve("./build"), {
  index: false, // root 경로에서 index.html을 보여주지 않도록 설정
});

// serve는 serverRender 전에 선언해야 함.
app.use(serve);
app.use(serverRender);

// 5000포트로 서버 가동
app.listen(5000, () => {
  console.log("Running on http://localhost:5000");
});

 

 

그 다음에는 JS와 CSS 파일을 불러오도록 html에 코드를 삽입해주어야 합니다.

불러와야 하는 파일 이름은 매번 빌드할 때마다 바뀌기 떄문에 빌드하고 나서 만들어지는 asset-mainifest.json 파일을 참고하여 불러오도록 작성합니다.

 

합번 yarn build 명령어를 실행한 다음, build 디렉토리의 asset-mainifest.json 을 열어 보세요.

 

 

- 참고사항 

 SSR-RECIPE 프로젝트 (2022-07-05) 기준으로 webpack.config.js 파일을 사용할 경우 버전관련 이슈가 존재합니다.

 publicUrlOrPath -> servedPath  다음과 같이 paths 경로를 수정해야 합니다.

 

 

 

- build/asset-mainifest.json

{
  "files": {
    "main.css": "/static/css/main.de2b4ee9.css",
    "main.js": "/static/js/main.ab37ff1b.js",
    "static/js/787.2bb6a743.chunk.js": "/static/js/787.2bb6a743.chunk.js",
    "index.html": "/index.html",
    "main.de2b4ee9.css.map": "/static/css/main.de2b4ee9.css.map",
    "main.ab37ff1b.js.map": "/static/js/main.ab37ff1b.js.map",
    "787.2bb6a743.chunk.js.map": "/static/js/787.2bb6a743.chunk.js.map"
  },
  "entrypoints": [
    "static/css/main.de2b4ee9.css",
    "static/js/main.ab37ff1b.js"
  ]
}

 

위의 파일들을 html 내부에 삽입해 주어야 합니다.

 

 

3.6  서버 사이드 랜더링 최종

 

서버 사이드 렌더링은 중간 과정에서 사이드 이슈가 계속 발생하여 추후 Next.js 사용으로 수정 예정입니다.

 

GitHub - S-YC/ssr-recipe: 서버 사이드 렌더링 이해하기