CRA SSR

• SSR 장점

  • 초기 로딩 속도 개선
  • 캐싱
  • 검색엔진 최적화

• server는 Express.js를 사용

• 필요한 3가지

  • React
  • ReactDOMServer
  • App

• index.html 파일을 성공적으로 읽으면 data가 텍스트 컨텐츠.

• mouting 포인트을 렌더된 앱으로 교체

import express from 'express';
import fs from 'fs';
import path from 'path';

// 필요한 3가지
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../src/App'

const PORT = 8000;

const app = express();

app.use('^/%', (req, res, next) =>  {
  fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {  // 인코딩설정
    if(err){
      console.log(err);
      return res.status(500).send("Some Error happend");
    }
        return res.send(data.replace(
            '<div id="root"></div>',
            `<div id="root">${ReactDOMServer.renderToString(<App/>)}</div>`)
        );
  });
});

// static files
app.use(express.static(path.resolve(__dirname, '..', 'build')))

app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`)
});

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

• 서버사이드에서 JSX 지원필요

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

require('ignore-styles');

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

require('./server');

{
  "name": "ssr-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0",
    "@babel/register": "^7.7.0",
    "express": "^4.17.1",
    "ignore-styles": "^5.0.1",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "ssr": "node server/index.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

yarn ssr

참조링크

• https://github.com/satansdeer/ssr-example