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

 

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

 

3.4  서버 코드 작성하기

 

이번에는 서버 사이드 렌더링을 처리할 서버를 구성 하겠습니다.

Express ->  Node.js 웹 프레임워크를 사용하여 웹 서버를 만들겠습니다.

 

웹 서버는 Koa, Hapi, connect 라이브러리를 사용하여 구현도 가능합니다.  다만 이 글에서는 가장 사용율이 높고 정적 파일 호스팅이 구현하기 쉬운 Express를 사용할 에정입니다.

 

먼저 다음  명령어로 Express를 설치해 주세요.

 

yarn add express

 

 

다음으로 이전 글에 작성했던 index.server.js 파일 코드를 다음과 같이 수정합니다.

 

 

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

// 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);
};

// express 사용
app.use(serverRender);

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

 

 

 

StaticRouter 컴포넌트 사용 목적 

•  이 컴포넌트는 서버 사이드 랜더링 용도로 사용하는 컴포넌트로 props로 넣어주는 location 값을 보고서 라우팅을 처리해주는 컴포넌트입니다. 여기서는 req.url 값을 넣어 주었습니다. (req는 요청 정보를 가지고 있는 객체입니다)
• StaticRouter 컴포넌트에 context props 값은 나중에 랜더링한 컴포넌트에 따라서 HTTP 상태 코드를 처리할 수 있습니다.

 

리액트 서버 사이드 랜더링을 통해서 만들어진 결과를 처리했으니 서버를 다시 빌드하고 실행해 보겠습니다.

 

 

- 참고사항 

 

css-loader 버전이 6.x.x 이후 버전을 설치하면 build 과정에서 에러가 발생합니다.

해당 문제를 해결하기 위헤서는 버전을 3.x.x 버전으로 내려야 하니 참고바랍니다.

 

yarn build:server
yarn start:server

 

 

정상적으로 실행했다면 아래처럼 실행하게 됩니다.

이제 브라우저에서 5000번 포트로 접속해서 APP이 동작하는지를 확인해 보세요.

 

 

 

 

 

 

아래와 같이 스크립트를 실행중인 상태에서 5000번 포트로 접속하면 APP컴포넌트가 랜더링되어 동작할 것입니다.