[javascript] 리액트 라우터의 서버 사이드 렌더링(SSR) 지원

04 Dec 2023

javascript

리액트 라우터는 싱글 페이지 응용 프로그램(SPA)을 구축하기 위해 많이 사용되는 라이브러리입니다. 그러나 이전에는 리액트 라우터가 서버 사이드 렌더링(SSR)을 지원하지 않아, 초기 요청 시에는 빈 페이지가 보여지고, 자바스크립트가 실행되고 자동으로 컴포넌트들이 렌더링되는 문제가 있었습니다.

하지만 최근의 리액트 라우터 v5에서는 서버 사이드 렌더링(SSR)을 지원하기 위한 새로운 기능이 추가되었습니다. 이를 통해 서버 측에서도 리액트 라우터를 사용하여 초기 요청 시에 원하는 컴포넌트를 렌더링할 수 있습니다.

SSR을 위한 리액트 라우터 설정

서버 사이드 렌더링(SSR)을 지원하기 위해서는 리액트 라우터를 적절하게 설정해야 합니다. 우선, 서버 측에서 사용할 라우터를 생성하고, 요청이 들어올 때마다 해당 요청에 대한 라우트를 매칭시켜 줍니다.

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

const server = express();

server.use(express.static('public'));

server.get('*', (req, res) => {
  const context = {};

  const html = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    res.redirect(context.url);
  } else {
    res.status(200).send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>My React App</title>
        </head>
        <body>
          <div id="root">${html}</div>
          <script src="/bundle.js"></script>
        </body>
      </html>
    `);
  }
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

위의 코드는 Express 서버에서 리액트 서버 사이드 렌더링을 구현하는 간단한 예시입니다. 요청이 들어올 때마다 renderToString 함수를 사용하여 해당 요청에 대한 라우트를 렌더링하고, 결과물을 HTML 문자열로 반환합니다. 이후, 결과물을 서버 응답으로 보내줍니다.

주의사항

리액트 라우터의 서버 사이드 렌더링은 추가 설정이 필요하며, 일부 기능이 제한될 수 있습니다. 주의해야 할 점은 다음과 같습니다.

BrowserRouter 대신 StaticRouter를 사용해야 합니다.
클라이언트 측에서 이벤트 핸들러를 사용하는 경우, 초기 렌더링 시에는 클라이언트 측에서 이벤트 핸들러가 실행되지 않습니다.

서버 사이드 렌더링(SSR)을 통해 리액트 라우터를 사용하면 검색 엔진 최적화(SEO)와 초기 로딩 속도 개선에 도움이 될 수 있습니다. 하지만 설정에 주의해야 할 사항들을 고려하여 구현해야 합니다.

더 자세한 내용은 리액트 라우터 공식 문서를 참고하시기 바랍니다.