Published on

React 서버사이드 렌더링 가이드 (번역)

Authors
  • avatar
    Name
    Luffy Yeon
    Twitter

React 서버사이드 렌더링 가이드 (번역)

팀 내에서 React SSR(Server Side Rendering)을 도입해보자는 논의가 오가게 되었다. 그래서 자료를 찾던 중 예전(20.12.8)에 작성된 글이긴 하지만 간단하게 express server(Node.js)를 띄워 SSR을 해보는 가이드 글이 있어 번역을 한번 해보며 공부해보려고 한다.


해당 글에서는 renderToString을 사용하였는데 react 18이 되며 suspense 및 streaming에 대한 권장으로 renderToPipeableStream도 추가되었는데 해당 부분은 react 릴리즈 노트 등을 참고하자.


| 해당 내용은 개인적인 공부를 위한 글로 오역 및 개인적인 의견이 반영된 내용이 있을 수 있으니 참고하여 주시기 바라며 문제가 되는 내용이 있는 경우 메일로 피드백 부탁합니다.



대부분의 웹 애플리케이션은 서버에 데이터만 요청한다. 모든 HTML 생성은 클라이언트 측에서 수행되며 사용자가 링크를 클릭할 때마다 서버에 요청하여 받은 데이터로 HTML을 생성하게 된다.


초기 렌더링의 경우 전체 애플리케이션에 대한 Javascript 및 CSS를 보내는 것이 아닌 초기 HTML과 일부의 Javascript, CSS 등을 보낸 후 클라이언트 측에서 Javascript 로드 이후 페이지를 렌더링하게 된다.


그리고 브라우저 새로고침이 발생하지 않도록 History API를 사용하여 URL을 변경하고 페이지 새로고침 없이 클라이언트에서 HTML을 렌더링하도록 한다.


만약 example.com/ 또는 example.com/settings와 같이 브라우저에 URL을 직접 액세스 하는 경우 모든 페이지에 대해서 서버는 동일한 HTML 및 리소스를 다시 보내게 된다. 클라이언트에서는 브라우저 URL을 읽고 지정된 경로에 맞게 페이지를 렌더링하게 된다. 


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SPA Application</title>
    <meta name="description" content="My SPA website." />
    <link rel="icon" href="/assets/favicon.ico" />
    <link href="styles.css" rel="stylesheet" />
  </head>


  <body>
    <div id="app"></div>
    <script src="vendor.js"></script>
    <script src="main.js"></script>
  </body>
</html>

예로 위의 HTML을 내려받은 후 Javascript에 의해 <div id="app"></div> 컨테이너에 요소를 채워 넣는다.


SPA Benefits

  1. 네이티브 애플리케이션과 비슷한 경험을 제공할 수 있으며 HTML이 클라이언트에서 생성되기 때문에 페이지 전환이 빠르다.
  2. Javascript 및 CSS 파일과 같은 리소스는 한번만 로드되고 응용 프로그램이 로드되면 다시 요청하지 않기 때문에 서버 대역폭을 절약 할 수 있다.
  3. 초기 애플리케이션 로드 후 서버에 킬로바이트 정도의 작은 데이터 요청만 한다.
  4. 서비스워커를 사용하여 사용자에게 더 나은 오프라인 경험을 제공하는 사용자 정의 화면을 표시 할 수 있다.

SPA Pitfalls

  1. SPA는 애플리케이션 Javascript 및 CSS 파일을 한 번에 제공해야 하므로 초기 응용프로그램 로드 시간이 지체될 수 있다. 이 문제는 코드 스플리팅 등을 통해 초기 로드 시간을 개선할 수도 있다. 하지만 로드 시간이 오래 걸리는 경우 사용자는 오랜 시간 동안 빈 화면을 보게 된다.
  2. SPA에서는 Javascript가 클라이언트에서 HTML을 생성 관리하기 때문에 무거운 작업을 클라이언트에서 수행하게 될 수도 있다.
  3. 서버에서 제공하는 초기 HTML에는 내용이 포함되어있지 않기 때문에 검색 엔진은 웹사이트를 상위 검색 결과에 노출하지 않을 수도 있다.


위의 장점에서는 지금은 더 장점이 늘어난 부분도 있고 단점의 경우에는 해결 방법이 생겨 해결이 가능한 요소들도 존재한다. 여기서 우리는 초기 렌더링에 대한 부분을 SSR로 대체하여 초기 렌더링 시 사용자가 빈 화면을 보는 시간을 줄이고 검색 엔진 노출에 대한 부분을 해결해 보고자 한다.



Setting up a React project

간단한 React 애플리케이션을 설정해보자. create-react-app과 같은 CLI 도구를 사용하여 React 프로젝트를 생성하거나 GitHub에서 표준 React 보일러 플레이트를 복제할 수 있지만 여기서는 custom webpack 프로젝트로 설정해 보겠다.


Webpack을 사용하여 Babel의 도움으로 React 및 ES6를 Javascript로 변환한다. 그리고 CSS를 별도로 생성하여 styles.css 파일로 추출한다. 애플리케이션 Javascript는 main.js와 vendor.js로 분할된다.

// babel.config.js
module.exports = {
  presets: ['@babel/env', '@babel/react'],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-async-to-generator',
    '@babel/transform-arrow-functions',
    '@babel/proposal-object-rest-spread',
    '@babel/proposal-class-properties',
  ],
}
{
  "name": "react-ssr",
  "description": "A React server-side rendering (SSR) sample project.",
  "version": "1.0.0",
  "scripts": {
    "start": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/plugin-transform-arrow-functions": "^7.12.1",
    "@babel/plugin-transform-async-to-generator": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "@babel/runtime": "^7.12.5",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^6.3.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.2",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}
// src/components/app/app.jsx
import React from 'react'


// import child components
import { Counter } from '../counter'


// export entry application component
export class App extends React.Component {
  constructor() {
    console.log('App.constructor()')
    super()
  }


  // render view
  render() {
    console.log('App.render()')


    return (
      <div className="ui-app">
        <Counter name="Monica Geller" />
      </div>
    )
  }
}
<!-- src/index.html -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React Boilerplate / Webpack 4 / Babel 7</title>
    <meta name="description" content="React boilerplate with Webpack 4 and Babel 7" />
    <link rel="icon" href="/assets/favicon.ico" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'


// import App components
import { App } from './components/app'


// compile App component in `#app` HTML element
ReactDOM.render(<App />, document.getElementById('app'))
// webpack.config.js
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')


/*-------------------------------------------------*/


module.exports = {
  // webpack optimization mode
  mode: 'development' === process.env.NODE_ENV ? 'development' : 'production',


  // entry files
  entry: [
    './src/index.js', // react
  ],


  // output files and chunks
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build/[name].js',
  },


  // module/loaders configuration
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },


  // webpack plugins
  plugins: [
    // extract css to external stylesheet file
    new MiniCssExtractPlugin({
      filename: 'build/styles.css',
    }),


    // prepare HTML file with assets
    new HTMLWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      minify: false,
    }),


    // copy static files from `src` to `dist`
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets'),
          to: path.resolve(__dirname, 'dist/assets'),
        },
      ],
    }),
  ],


  // resolve files configuration
  resolve: {
    // file extensions
    extensions: ['.js', '.jsx', '.scss'],
  },


  // webpack optimizations
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,


        vendor: {
          chunks: 'all', // both : consider sync + async chunks for evaluation
          name: 'vendor', // name of chunk file
          test: /node_modules/, // test regular expression
        },
      },
    },
  },


  // development server configuration
  devServer: {
    port: 8088,
    historyApiFallback: true,
  },


  // generate source map
  devtool: 'source-map',
}

위의 설정에서 src/index.js는 컴파일의 진입점이고 src/components/app은 애플리케이션의 진입 컴포넌트이다. App 컴포넌트는 기본적으로 Counter 컴포넌트를 렌더링한다.


처음 index.html에는 비어있는 <div id="app"></div> 요소만 있었고 위의 리액트 컴포넌트들에 의해 클라이언트에서 요소들이 생성된다.

이는 개발 서버의 응답을 확인했을 때 비어있는 <div id="app"></div> 요소가 표시되는 것을 확인할 수 있다. 이것은 검색 엔진 크롤러에 잡히지 않으므로 서버에서 요소를 적절한 HTML로 채워야 한다.



Setting up an SSR server

서버 측에서 리액트 렌더링을 하려면 Node.js 서버를 사용해야 한다. 샘플 프로젝트의 경우 Express.js를 사용하여 HTTP 서버를 구성하였다. server/express.js 파일을 생성하고 웹 애플리케이션의 JS, CSS 및 기타 리소스 파일을 제외한 모든 경로에 대해 index.html 파일을 제공하는 로직을 작성해보자. 


server/
├── express.js
└── index.js

// server/express.js
const express = require('express')
const fs = require('fs')
const path = require('path')


// create express application
const app = express()


// serve static assets
app.get(/\.(js|css|map|ico)$/, express.static(path.resolve(__dirname, '../dist')))


// for any other requests, send `index.html` as a response
app.use('*', (req, res) => {
  // read `index.html` file
  let indexHTML = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), {
    encoding: 'utf8',
  })


  // set header and status
  res.contentType('text/html')
  res.status(200)


  return res.send(indexHTML)
})


// run express server on port 9000
app.listen('9000', () => {
  console.log('Express server started at http://localhost:9000')
})

// server/index.js
require('./express.js')

이제 $ node server/index.js 명령으로 index.html을 제공하는 HTTP 서버를 실행할 수 있다.


이제 서버에서 index.html을 제공하기는 하지만 여전히 <div id="app"></div> 요소는 비어있으며 서버 측 렌더링 코드를 작성해야 한다.


브라우저의 경우 src/index.js 파일을 진입점으로 App 컴포넌트를 가져와 내부에서 렌더링을 수행한다.

// import App components
import { App } from './components/app'
// compile App component in `#app` HTML element
ReactDOM.render(<App />, document.getElementById('app'))

위와 같은 수행을 서버에서 동일하게 해야 하며 index.html을 제공하는 동안 <div id="app"></div> 요소를 HTML로 채워야 한다.


react-dom/server 패키지는 ReactDOM.render와 마찬가지로 컴포넌트를 렌더링하는 renderToString()을 제공하지만 DOM 요소를 채우는 대신 HTML 문자열을 반환한다. 브라우저에 응답을 반환하기 전에 server/express.js에서 HTML을 채워보도록 하자.


// server/express.js
const express = require('express')
const fs = require('fs')
const path = require('path')
const React = require('react')
const ReactDOMServer = require('react-dom/server')


// create express application
const app = express()


// import App component
const { App } = require('../src/components/app')


// serve static assets
app.get(/\.(js|css|map|ico)$/, express.static(path.resolve(__dirname, '../dist')))


// for any other requests, send `index.html` as a response
app.use('*', (req, res) => {
  // read `index.html` file
  let indexHTML = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), {
    encoding: 'utf8',
  })


  // get HTML string from the `App` component
  let appHTML = ReactDOMServer.renderToString(<App />)


  // populate `#app` element with `appHTML`
  indexHTML = indexHTML.replace('<div id="app"></div>', `<div id="app">${appHTML}</div>`)


  // set header and status
  res.contentType('text/html')
  res.status(200)


  return res.send(indexHTML)
})


// run express server on port 9000
app.listen('9000', () => {
  console.log('Express server started at http://localhost:9000')
})

// server/index.js
const path = require('path')


// ignore `.scss` imports
require('ignore-styles')


// transpile imports on the fly
require('@babel/register')({
  configFile: path.resolve(__dirname, '../babel.config.js'),
})


// import express server
require('./express.js')

express.js에서 App 컴포넌트를 가져와 브라우저에 렌더링할 HTML 문자열로 채우게 된다. 여기에서 React 컴포넌트를 가져와 JSX 표현 식도 사용하게 되는데 babel을 사용하여 변환해야 한다.


$ npm i -D @babel/register ignore-styles

위와 같은 설정을 끝낸 이후에는 서버에서 미리 렌더링 된 HTML을 응답 받기를 기대해야 한다. 실제로 요청 시에 HTML 응답에서 <div id="app"></div>가 채워져 있는 것을 볼 수 있으며 검색 엔진 크롤러가 웹사이트를 크롤링할 때 빈 페이지로 인식하지 않게 된다.


이제 프론트에서 몇 가지 수정이 필요한데 지금 당장은 프론트에서는 <div id="app"></div>가 채워져 있는 것을 신경 쓰지 않고 재 렌더링이 발생할 것이다.


서버 측에서 제공된 HTML을 재사용하고 해당 DOM 요소에 이벤트 리스너를 연결하는 작업이 필요하다. 이러한 작업을 hydration이라고 하며 ReactDOM.render는 hydration을 수행하지 않지만 ReactDOM.hydrate를 사용하여 hydration을 수행할 수 있다. 


// import App components
import { App } from './components/app'
// compile App component in `#app` HTML element
ReactDOM.hydrate(<App />, document.getElementById('app'))

ReactDOM.hydrate는 ReactDOM.render와 동일하게 동작하지만 서버 측에서 전달받은 HTML을 사용한다. 서버에서 전달받은 HTML이 렌더링할 App 컴포넌트와 동일할 것으로 예상하고 동작하기 때문에 불일치하는 경우에 문제가 발생할 수 있다. (자세한 내용은 설명서를 참고)


개발 모드에서는 개발 서버가 서버 측 렌더링을 수행하지 않기 때문에 ReactDOM.render가 필요하다. render와 hydrate 호출이 있는 index.dev.js와 index.prod.js를 나누고 webpack.config.js 내부에서 환경변수를 사용하여 진입점을 설정하자.



Handling Routing

라우팅은 URL 경로에 각 페이지를 표시하는 방법이다. 예전에는 서버에서 라우팅이 수행되었지만 SPA에서는 클라이언트 측에서 라우팅 메커니즘을 사용한다. 브라우저의 URL 경로가 변경되면 이전의 컴포넌트를 제거하고 새로운 컴포넌트를 마운트하여 페이지가 변경되는 것 같은 경험을 제공한다.


React를 사용한 웹 프로젝트에서 라우터는 react-router-dom을 사용한다. 예제로 '/' 기본 경로에는 Counter 컴포넌트를 렌더링하고 '/post' 경로에는 Post 컴포넌트를 렌더링해보자. 클라이언트 라우터를 변경하기 위해 react-router-dom 패키지를 설치하여 시작하자. 


$ npm install -D react-router-dom

Switch 및 Route 컴포넌트를 설정하고 BrowserRouter 컴포넌트를 App 컴포넌트에 래핑한다.

// src/components/app/app.component.jsx


import React from 'react'
import { NavLink as Link, Switch, Route } from 'react-router-dom'


// import child components
import { Counter } from '../counter'
import { Post } from '../post'


// export entry application component
export class App extends React.Component {
  constructor() {
    console.log('App.constructor()')
    super()
  }


  // render view
  render() {
    console.log('App.render()')


    return (
      <div className="ui-app">
        {/* navigation */}
        <div className="ui-app__navigation">
          <Link
            className="ui-app__navigation__link"
            activeClassName="ui-app__navigation__link--active"
            to="/"
            exact={true}
          >
            Counter
          </Link>


          <Link
            className="ui-app__navigation__link"
            activeClassName="ui-app__navigation__link--active"
            to="/post"
            exact={true}
          >
            Post
          </Link>
        </div>


        <Switch>
          <Route path="/" exact={true} render={() => <Counter name="Monica Geller" />} />


          <Route path="/post" exact={true} component={Post} />
        </Switch>
      </div>
    )
  }
}
// src/index.dev.js


import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'


// import App components
import { App } from './components/app'


// compile App component in `#app` HTML element
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('app')
)
// src/index.prod.js


import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'


// import App components
import { App } from './components/app'


// compile App component in `#app` HTML element
ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('app')
)

개발 서버를 다시 실행하면 URL 기본 '/' 경로와 일치하므로 Counter 컴포넌트가 렌더링 되는 것을 볼 수 있다. URL '/post'로 이동 시 Post 컴포넌트가 마운트 된다.


클라이언트에서 BrowserRouter가 URL 변경을 수신 대기하고 URL 경로에 맞게 각 컴포넌트를 렌더링한다.


클라이언트에서 BrowserRouter가 수행하던 역할을 서버에서 제공하도록 해야 한다. 이는 location prop을 전달 받는 StaticRouter 컴포넌트를 사용해야 한다. Express 라우터 핸들러에서 받은 req.originalUrl 값을 location prop 값으로 사용할 수 있다. 


// server/express.js


const express = require('express')
const fs = require('fs')
const path = require('path')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const { StaticRouter } = require('react-router-dom')


// create express application
const app = express()


// import App component
const { App } = require('../src/components/app')


// serve static assets
app.get(/\.(js|css|map|ico)$/, express.static(path.resolve(__dirname, '../dist')))


// for any other requests, send `index.html` as a response
app.use('*', (req, res) => {
  // read `index.html` file
  let indexHTML = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), {
    encoding: 'utf8',
  })


  // get HTML string from the `App` component
  let appHTML = ReactDOMServer.renderToString(
    <StaticRouter location={req.originalUrl}>
      <App />
    </StaticRouter>
  )


  // populate `#app` element with `appHTML`
  indexHTML = indexHTML.replace('<div id="app"></div>', `<div id="app">${appHTML}</div>`)


  // set header and status
  res.contentType('text/html')
  res.status(200)


  return res.send(indexHTML)
})


// run express server on port 9000
app.listen('9000', () => {
  console.log('Express server started at http://localhost:9000')
})

이제 브라우저가 http://localhost:9000 및 http://localhost:9000/post를 요청하면 URL에서 경로를 추출하여 StaticRouter에서 렌더링할 컴포넌트를 제어한다.


이후에 브라우저에서 링크를 클릭하여 URL 경로 변경 시 React 앱은 HTML을 가져오기 위해 서버에 새 요청을 보내지 않고 클라이언트에서 처리하게 된다.



Handling Data Fetch

예시에서 Post 컴포넌트에는 하드 코딩된 제목과 설명이 있지만 API를 통해서 데이터를 가져오려고 한다. jsonplaceholer.com에서 샘플 JSON 데이터를 가져올 것이다. Post 컴포넌트 내부에서 fetch를 axios를 사용하여 구현해보자. 


$ npm install -S axios

Post 컴포넌트에서 fetchData 정적 메소드를 만들어 데이터를 가져오자. 이는 React 컴포넌트의 componentDidMount에서 호출하여 데이터를 가져와 상태를 업데이트하고 렌더링하게 된다. 


// src\components\post\post.component.jsx


import React from 'react'
import axios from 'axios'


export class Post extends React.Component {
  constructor() {
    console.log('Post.constructor()')


    super()


    // component state
    this.state = {
      isLoading: true,
      title: '',
      description: '',
    }
  }


  // fetch data
  static fetchData() {
    console.log('Post.fetchData()')


    return axios.get('https://jsonplaceholder.typicode.com/posts/3').then((response) => {
      return {
        title: response.data.title,
        body: response.data.body,
      }
    })
  }


  // when component mounts, fetch data
  componentDidMount() {
    console.log('Post.componentDidMount()')


    Post.fetchData().then((data) => {
      this.setState({
        isLoading: false,
        title: data.title,
        description: data.body,
      })
    })
  }


  render() {
    console.log('Post.render()')


    return (
      <div className="ui-post">
        <p className="ui-post__title">Post Widget</p>


        {this.state.isLoading ? (
          'loading...'
        ) : (
          <div className="ui-post__body">
            <p className="ui-post__body__title">{this.state.title}</p>
            <p className="ui-post__body__description">{this.state.description}</p>
          </div>
        )}
      </div>
    )
  }
}

위의 동작은 서버에서는 작동하지 않는다. renderToString() 메소더는 componentDidMount()를 포함한 생명주기에 해당하는 메소드를 실행시키지 않는다. 실행되는 React 컴포넌트의 메소드는 생성자와 랜더이다.


생성자 또는 렌더링에서 fetchData 메소드를 호출하려는 경우 API 요청의 비동기 특성으로 작동하지 않는다. express.js 서버에서 HTML을 반환하기 전에 컴포넌트에 대한 데이터를 수동으로 가져와서 Post 컴포넌트에 전달해야 한다.


첫 번째 문재는 Post 컴포넌트가 App 컴포넌트 안에 포함되어있어 쉽게 접근할 수 없다는 것이다. 두 번째는 Post 컴포넌트 경로에 대한 데이터를 어떻게 가져올 것인가에 대한 문제이다.


먼저 StaticRouter에 의해 렌더링 된 컴포넌트를 식별하여 해당 컴포넌트에 대한 데이터를 가져와야 한다. 그런 다음 가져온 데이터를 라우터가 렌더링한 컴포넌트에 전달하고 서버에서 데이터를 제공한 경우 클라이언트에서 데이터를 다시 가져오는 것을 피해야 한다. 


// server\express.js


const express = require('express')
const fs = require('fs')
const path = require('path')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const { StaticRouter, matchPath } = require('react-router-dom')


// create express application
const app = express()


// import App component
const { App } = require('../src/components/app')


// import routes
const routes = require('./routes')


// serve static assets
app.get(/\.(js|css|map|ico)$/, express.static(path.resolve(__dirname, '../dist')))


// for any other requests, send `index.html` as a response
app.use('*', async (req, res) => {
  // get matched route
  const matchRoute = routes.find((route) => matchPath(req.originalUrl, route))


  // fetch data of the matched component
  let componentData = null
  if (typeof matchRoute.component.fetchData === 'function') {
    componentData = await matchRoute.component.fetchData()
  }


  // read `index.html` file
  let indexHTML = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), {
    encoding: 'utf8',
  })


  // get HTML string from the `App` component
  let appHTML = ReactDOMServer.renderToString(
    <StaticRouter location={req.originalUrl} context={componentData}>
      <App />
    </StaticRouter>
  )


  // populate `#app` element with `appHTML`
  indexHTML = indexHTML.replace('<div id="app"></div>', `<div id="app">${appHTML}</div>`)


  // set value of `initial_state` global variable
  indexHTML = indexHTML.replace(
    'var initial_state = null;',
    `var initial_state = ${JSON.stringify(componentData)};`
  )


  // set header and status
  res.contentType('text/html')
  res.status(200)


  return res.send(indexHTML)
})


// run express server on port 9000
app.listen('9000', () => {
  console.log('Express server started at http://localhost:9000')
})

// server/routes.js


const { Counter } = require('../src/components/counter')
const { Post } = require('../src/components/post')


module.exports = [
  {
    path: '/',
    exact: true,
    component: Counter,
  },
  {
    path: '/post',
    exact: true,
    component: Post,
  },
]

// src\components\post\post.component.jsx


import React from 'react'
import axios from 'axios'


export class Post extends React.Component {
  constructor(props) {
    console.log('Post.constructor()')


    super()


    // component state
    if (props.staticContext) {
      this.state = {
        isLoading: false,
        title: props.staticContext.title,
        description: props.staticContext.body,
      }
    } else if (window.initial_state) {
      this.state = {
        isLoading: false,
        title: window.initial_state.title,
        description: window.initial_state.body,
      }
    } else {
      this.state = {
        isLoading: true,
        title: '',
        description: '',
      }
    }
  }


  // fetch data
  static fetchData() {
    console.log('Post.fetchData()')


    return axios.get('https://jsonplaceholder.typicode.com/posts/3').then((response) => {
      return {
        title: response.data.title,
        body: response.data.body,
      }
    })
  }


  // when component mounts, fetch data
  componentDidMount() {
    if (this.state.isLoading) {
      console.log('Post.componentDidMount()')


      Post.fetchData().then((data) => {
        this.setState({
          isLoading: false,
          title: data.title,
          description: data.body,
        })
      })
    }
  }


  render() {
    console.log('Post.render()')


    return (
      <div className="ui-post">
        <p className="ui-post__title">Post Widget</p>


        {this.state.isLoading ? (
          'loading...'
        ) : (
          <div className="ui-post__body">
            <p className="ui-post__body__title">{this.state.title}</p>
            <p className="ui-post__body__description">{this.state.description}</p>
          </div>
        )}
      </div>
    )
  }
}
<!-- src/index.html  -->


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React Boilerplate / Webpack 4 / Babel 7</title>
    <meta name="description" content="React boilerplate with Webpack 4 and Babel 7" />
    <link rel="icon" href="/assets/favicon.ico" />


    <!-- initial state -->
    <script>
      var initial_state = null
    </script>
  </head>
  <body style="background-color: #eee;">
    <div id="app"></div>
  </body>
</html>

server/routes.js는 App 컴포넌트 내부에서 렌더링 될 컴포넌트를 내보낸다. 경로에 일치하는 렌더링 컴포넌트에 접근할 수 있게 하며 정적 메소드인 fetchData를 통해 데이터를 가져올 수 있다.


StaticRouter 컴포넌트의 컨텍스트 prop을 사용하여 렌더링 된 컴포넌트 내부에 componentData 값을 전달한다. staticContext로 전달되며 StaticRouter에 의해 전달되었으므로 서버에만 존재한다.


이전에 말했던 것처럼 componentDidMount는 서버에서 실행되지 않으므로 서버에서 중복하여 데이터를 가져오는 것에 대해 걱정할 필요가 없다. 하지만 React.DOM.hydrate가 호출되며 브라우저에서 실행이 된다.


componentDidMount가 hydrate 상태에서 호출되는 이유는 컴포넌트가 서버에서 생성된 HTML을 수정하려면 componentDidMount에서 setState를 호출해야 하기 때문이다. 이 프로세스는 2단계 렌더링이라고 하며 이것은 해당 hydrate 링크를 참고하자.


서버에서 데이터를 이미 가져왔을 때 데이터를 가져오는 것을 방지하기 위해서는 Post 컴포넌트에 데이터를 전달해야 한다. 이 방법으로는 index.html에 전역 변수를 설정하고 componentData로 해당 변수를 업데이트하는 것이다.


이제 http://localhost:9000/post 경로를 방문하면 서버는 먼저 컴포넌트의 fetchData 메소드를 호출하여 컴포넌트 데이터를 가져온 다음 컨텍스트를 사용하여 컴포넌트에 데이터를 전달한다. StaticRouter의 prop을 사용하여 컴포넌트가 데이터에 접근할 수 있도록 initial_data를 전역 변수에 설정한다.


지금까지 설명된 내용들은 아주 일부분이며 서버 측 렌더링은 훨씬 더 복잡해질 수 있다. 다음 GitHub 레파지토리에서 해당 문서에서 빌드한 예제와 전체 샘플 프로젝트를 확인할 수 있다.



In Conclusion

위 글을 번역하며 React로 SSR을 해보는 것을 간단하게 알 수 있었다. react 18이 되며 모든 데이터를 가져와 완성된 HTML을 한 번에 내려주는 것이 아닌 부분적으로 hydrate를 수행하는 streaming HTML이라고 하는 선택적으로 hydration을 지원한다. 이러한 지원을 보며 Node 서버를 사용하여 React로 SSR을 처리하는 부분을 조금 더 공부해야겠다고 생각하게 되었다. 현재는 서비스에 우선순위가 높지 않고 Node 서버 관리 등의 추가적인 리소스 및 관리 포인트가 우려되어 반영할 것 같지는 않은 상태이다.


이미 서버 쪽으로도 여러 기술이 나왔지만 사실상 포커스를 두어 공부를 하진 않았던 것 같다. 이제는 많은 곳에서 사용하는 Next.js만 보더라도 손쉽게 SSR을 할 수 있도록 도와주지만, 위와 같이 React만으로 SSR에 대한 동작이 어떻게 이루어지는지 알아보고 파악해보고 사용해 보는 것도 좋을 것 같다는 생각이 들었다.



[Ref]: