20.3.1 서버 사이드 렌더링용 엔트리 만들기

엔트리(entry)는 웹팩에서 프로젝트를 불러올 때 가장 먼저 불러오는 파일입니다. 예를 들어 현재 작성 중인 리액트 프로젝트에서는 index.js를 엔트리 파일로 사용합니다. 이 파일부터 시작하여 내부에 필요한 다른 컴포넌트와 모듈을 불러오고 있지요.

서버 사이드 렌더링을 할 때는 서버를 위한 엔트리 파일을 따로 생성해야 합니다. src 디렉터리에 index.server.js라는 파일을 생성하세요.

index.server.js

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToString(
  <div>Hello Server Side Rendering!</div>
);

console.log(html);

---

 

지금은 일단 가장 기본적인 코드만 작성했습니다. 서버에서 리액트 컴포넌트를 렌더링할 때는 ReactDOMServer의 renderToString이라는 함수를 사용합니다. 이 함수에 JSX를 넣어서 호출하면 렌더링 결과를 문자열로 반환합니다.