가장 쉬운 방법으로 리액트에서 서버사이드 렌더링 이해하기

서버 사이드 렌더링이란 페이지를 서버측에서 먼저 간단하게 띄워주고, 완전하게 렌더링된 페이지를 클라이언트에게 다시 보내주는 기법을 말합니다.

모든것을 최대한 간소화 시켜 순수 서버 사이드 렌더링에 대한 이해만을 위해서 create-react-app과 express 만 사용하도록 하겠습니다.

STEP 1 : create react app 을 시행해줍니다.

yarn create react-app ssr-app

STEP 2 : ssr-app 폴더 내부로 들어가줍니다.

터미널에서 다음 명령어를 실행해주세요. yarn add express

server 라는 새로운 폴더를 생성해줍니다.

server 라는 새로운 폴더 안에 2개의 파일을 만들어주세요.

index.js, server.js

File: server.js

import path from 'path'
import fs from 'fs'

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

import App from '../src/App'

const PORT = 8080;
const app = express();

const router = express.Router();

const serverRenderedContent = (req, res, next) => {
    fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {
        if (err) {
            console.error(err);
            return res.status(500).send('An error occurred')
        }
        return res.send(
            data.replace(
                '<div id="root"></div>',
                `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
            )
        )
    })
};
router.use('^/$', serverRenderedContent);

router.use(
    express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' })
);

app.use(router);

app.listen(PORT, () => {
    console.log(`SSR running on port ${PORT}`)
});

Let’s try to understand above code.

1. express 서버에게 App 을 client side 로부터 불러옵니다.
2. express 서버에게 /build 폴더를 정적 파일을 담는 폴더라고 알립니다.
3. express 서버에게 다음을 교체하라고 알려줍니다.

'<div id="root"></div>'

via

`<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`

ReactDOMServer 의 renderToString 메서드는 app 의 내용을 html string 으로 띄워주는 역할을 합니다.

클라이언트 사이드로 가서 src/index.js 파일을 변경해줍니다.

ReactDOM.render(<App />, document.getElementById('root'));

via

ReactDOM.hydrate(<App />, document.getElementById('root'));

Notes: ReactDOM.hydreate() 는 render() 와 똑같습니다만, ReactDOMServer에 의해서 렌더링되어지고 있는 HTML 전체의 컨텐츠를 감싸고 있는 컨테이너에 이벤트 리스너를 부착하게 됩니다.

서버 사이드 렌더링을 위한 모든 준비가 끝났습니다.

이제,

react app 을 빌드해주세요.

yarn build

그리고 node server/server.js 명령으로 express 서버를 실행시켜보세요.

아마 transpilation error가 발생할 것입니다.

당연히, Node.js 는 jsx 와 es6 문법에 대해서 모르기 때문에 파일을 제대로 실행시킬 수 없는 것입니다. 그렇기 때문에 nodejs 코드는 babel 에 의해서 transpiled 되어져야 합니다.

몇가지 패키지들을 설치해보도록 할거에요.

yarn add @babel/register @babel/preset-env @babel/preset-react ignore-styles

그리고 다음 코드 조각을 server/index.js 파일에 넣어봅시다.

require('ignore-styles');

require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
});

require('./server.js');

이제 다시 서버를 실행시켜보세요.

node server/index.js

만약 모든게 제대로 되어졌다면, localhost:8080 서버로 들어가서 확인해보세요.

Congratulation, react 에서 servers side rendering 이 무엇인지 배우셨습니다.

Github Repo:

donggyushin/understanding-server-side-rendering-in-react

Related Tags:

server side rendering react
create react app server side rendering
what is server side rendering
understanding serverside rendering in react
react ssr github
react ssr 2019