[React] 리액트로 SSR 구현하기

🎯 React를 활용한 Server Side Rendering

📝 ReactDOMServer

• ReactDOMServer를 활용하여, 특정 React Component를 HTML로 빌드
• Node.js 서버에서 JSX를 사용하여 페이지 빌드

 

📝 ReactDOMServer.renderToString()

• React Component를 HTML로 변환한다.
• 클라이언트의 페이지 요청 시, 변환된 HTML string을 전달한다.
• ReactDOMServer.renderToNodeStream은 readable stream을 생성하고 브라우저가 받아서 점진적으로 페이지를 그린다.

 

📝 ReactDOM.hydrate

• renderToString으로 생성한 HTML의 root을 기준으로, 받아온 React code를 통해 markup에 이벤트 핸들러를 등록하는 등 컴포넌트화 한다.
• 기존 ReactDOM.render(<App />, rootElement)은 rootElement에 App을 넘겨서 만들었다고 하면
• ReactDOM.hydrate(<App />, rootElement)은 이미 rootElement에 App이 그려져 있다. 그리고 App을 넘겨서 렌더링하고 이미 렌더링 된 것과 비교해서 이벤트 핸들러를 넣어준다.
• 즉, 아무것도 없는 html에 React화 하는 작업이다.

 

📕 Hydration 시 주의할 점

• 서버에서 생성한 컴포넌트와 브라우저에서 Hydration을 거친 후의 마크업이 다르면, React runtime은 경고를 보냄.
  • ex) 현재 시간을 보여주는 컴포넌트 (마크업 된 서로 시간이 다를 수 있다.)
• 경고 발생 시, 어느 부분에서 차이점이 생기는지 반드시 파악해야 한다.
  • 데이터 패칭이 실패하는 경우가 생길 수 있다.
• componentDidMount 역할을 하는 useEffect의 경우, SSR시 서버에서 동작하지 않을 수 있다.
• data loading 등의 처리를 별도로 해주어야 할 필요가 있다.

 

📝 SSR 구현 예제

npm init -y
npm i react react-dom
npm i -D webpack webpack-cli
npm i -D @babel/core @babel/preset-env @babel/preset-react
npm i -D babel-loader #바벨과 웹팩을 연동

npm i express webpack-node-externals

• 앱이 동작 안 됨 => app.js가 만든 html을 리턴했지만 동작하기 위한 리액트 코드를 전송하지는 않았다. ⇒ 템플릿 작성

npm run build
npm run build:server
npm run server

GitHub - h1jun/react-ssr-project