React.js

Today I Learned ... react.js

🙋‍♂️ Reference book

🙋‍ My Dev Blog

---

CH 20. 서버사이드 렌더링 - (2)
part 2 - 서버 코드 작성(express) / 정적 파일 제공

서버 사이드 렌더링

서버 코드 작성

Express 프레임워크

• node 웹 프레임워크. 웹서버 구축 가능.
• Express는 사용률도 높고, 추후 정적 파일 호스팅 시에도 쉽게 구현 가능함.

• 패키지 설치

$ yarn add express

src/index.server.js (수정)

import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { StaticRouter } from 'react-router-dom';
import App from './App';

const app = express();

const serverRender = (req, res, next) => {
    // 404가 떠야 하는 상황에 서버사이드 렌더링을 해줌
    const context = {};
    const jsx = ( 
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );
    const root = ReactDOMServer.renderToString(jsx); // 렌더링을 하고나서
    res.send(root); // 클라이언트에게 response 
}

app.use(serverRender);

app.listen(5000, () => {
    // 5000 포트로 서버 가동
    console.log('Running on http://localhost:5000');
}); 

• StaticRouter 컴포넌트는 주로 서버사이드 렌더링 용으로 사용되는 라우터임.
  -> props인 location 값에 따라 라우팅 해줌.

• 위에서는 req.url을 넣어줌.
  req는 요청(request)에 대한 정보를 지닌 객체임.

• context 라는 props도 넣어줘서 나중에 HTTP 상태 코드를 설정해줄 수 있음.

🛠 Error 로그

react-router-dom이 v6로 업데이트되면서
StaticRouter를 임포트하는 코드가 달라졌다.

import { StaticRouter } from 'react-router-dom/server';

-> 'react-router-dom'이 아닌 'react-router-dom/server'로 해주니 에러 해결됨.

Result

• 현재는 CSS를 불러오지 않기 때문에, 스타일 적용도 안되어있어야 정상이다.
• 자바스크립트도 실행이 안되어있으므로 위 화면은 전부 서버사이드 렌더링 된 것이다.

-> Network 탭을 살펴보자.

-> blue의 Response 탭을 보면, 컴포넌트 렌더링 결과가 문자열로 잘 전달되고 있다.

---

정적 파일 제공

• Express의 내장되어있는 static 미들웨어를 사용하여
  서버를 통해 build에 있는 JS, CSS 파일들에 접근하게 해줌.

index.server.js (수정)

import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';
import path from 'path';
// 🔺 path 모듈 임포트함.

const app = express();

const serverRender = (req, res, next) => {
    // 404가 떠야 하는 상황에 서버사이드 렌더링을 해줌
    const context = {};
    const jsx = ( 
        <StaticRouter location={req.url} context={context}>
            <App />
        </StaticRouter>
    );
    const root = ReactDOMServer.renderToString(jsx); // 렌더링을 하고나서
    res.send(root); // 클라이언트에게 response 
}

// 🔻 serve 추가 (static 미들웨어)
const serve = express.static(path.resolve('./build'), {
    index: false    // '/' 경로에서 index.html 안보이게
});

app.use(serve); // serverRender 전에 위치해야함.
app.use(serverRender);

app.listen(5000, () => {
    // 5000 포트로 서버 가동
    console.log('Running on http://localhost:5000');
}); 

• 그 다음, JS 와 CSS 파일을 불러오도록 html에 코드를 삽입.
  -> 빌드할 때마다 생기는 asset-manifest.json 파일을 참고.

$ yarn build

/build/asset-manifest.json

{
  "files": {
    "main.css": "/static/css/main.6fc69dca.css",
    "main.js": "/static/js/main.2fa3917b.js",
    "index.html": "/index.html",
    "main.6fc69dca.css.map": "/static/css/main.6fc69dca.css.map",
    "main.2fa3917b.js.map": "/static/js/main.2fa3917b.js.map"
  },
  "entrypoints": [
    "static/css/main.6fc69dca.css",
    "static/js/main.2fa3917b.js"
  ]
}