[nodejs] SSR을 구현하는 방법

19 Dec 2023

nodejs

서버 사이드 렌더링(SSR)은 클라이언트 사이드 렌더링과 달리 서버 측에서 HTML을 생성하여 클라이언트에 응답으로 제공하는 방법입니다. SSR을 통해 초기 로딩 속도를 향상시키고 검색 엔진 최적화(SEO)를 개선할 수 있습니다. 이번 포스트에서는 Node.js를 사용하여 SSR을 구현하는 방법을 살펴보겠습니다.

1. Express 앱 생성

가장 먼저 Express 앱을 만듭니다. Express는 Node.js 웹 애플리케이션을 위한 강력한 프레임워크이며 SSR을 쉽게 구현할 수 있도록 도와줍니다.

const express = require('express');
const app = express();

// 라우터 및 미들웨어 설정
// ...

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

2. 서버 사이드 렌더링 구현

SSR을 구현하기 위해서는 원하는 페이지를 HTML로 렌더링하는 함수를 작성해야 합니다. 다음은 간단한 SSR 함수의 예시입니다.

// SSR 함수 예시
function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>SSR 예시</title>
      </head>
      <body>
        <div id="app">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
        </script>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;
}

위 예시에서는 renderFullPage 함수를 사용하여 HTML 전체 페이지를 생성하였습니다.

3. 라우팅 및 미들웨어 설정

마지막으로, SSR을 적용할 라우팅과 미들웨어를 설정합니다.

app.get('/', (req, res) => {
  const html = renderPage(); // SSR 함수를 통해 HTML 생성
  const preloadedState = {}; // 초기 스토어 상태
  const finalHtml = renderFullPage(html, preloadedState); // 전체 페이지 랜더링
  res.send(finalHtml); // 완성된 HTML 응답
});

// 추가적인 라우팅 및 미들웨어 설정
// ...

이제 Express 앱에 SSR이 구현되었습니다. SSR을 통해 웹 애플리케이션의 성능을 향상시키고 SEO를 개선할 수 있습니다.

이상으로 Node.js를 활용하여 서버 사이드 렌더링을 구현하는 방법에 대해 알아보았습니다.

참고문헌:

Express 공식 문서: https://expressjs.com/