[nodejs] SSR과 코드 분할

19 Dec 2023

nodejs

서버 사이드 렌더링(Server-Side Rendering, SSR)은 웹 애플리케이션의 성능을 향상시키는 데 중요한 역할을 합니다. 이것은 초기 페이지 로딩 시간을 단축하고 검색 엔진 최적화(SEO)를 향상시키는 대표적인 방법 중 하나입니다. 그러나 대형 웹 애플리케이션의 규모가 커짐에 따라 초기 로딩 속도 문제는 더욱 중요해졌습니다.

이 때 SSR과 코드 분할을 함께 사용하면 애플리케이션의 초기 로딩 속도를 획기적으로 향상시킬 수 있습니다. 코드 분할은 웹 애플리케이션에서 사용되는 자바스크립트 코드를 파일 단위로 분리하는 기술이며, 이를 통해 사용자가 실제로 필요로 하는 코드만을 가져올 수 있습니다. 이는 초기 로딩 속도를 향상시키는 데 도움을 줍니다.

서버 쪽에서 코드 분할 적용을 하려면, 널리 사용되는 Node.js 플랫폼을 사용하여 React, Vue 또는 Angular와 같은 프런트엔드 프레임워크와 함께 웹 애플리케이션을 개발할 수 있습니다.

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

const app = express();

app.get('/', async (req, res) => {
  const data = await getInitialData();
  const initialMarkup = renderToString(<App data={data} />);
  res.send(`
    <html>
      <head>
        <title>SSR with Code Splitting</title>
      </head>
      <body>
        <div id="app">${initialMarkup}</div>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

위 코드에서는 express를 사용하여 서버를 초기화하고, 클라이언트 요청이 오면 컴포넌트를 렌더링하고 초기 렌더링 마크업을 반환합니다. 그러나 실제로는 클라이언트에게 필요한 자바스크립트 코드만을 전달하는 설정이 추가되어야 합니다.

코드 분할을 적용하는 가장 간단한 방법은 Webpack의 동적 임포트(dynamic import)를 활용하는 것입니다. 이것을 사용하면 필요한 모듈만을 동적으로 불러올 수 있으며, Webpack은 이를 통해 각 모듈 별로 코드 번들을 생성합니다. 이렇게 생성된 번들은 신속한 초기 로딩을 가능케 합니다.

Node.js에서 웹 애플리케이션을 서버 쪽에서 렌더링하면서 코드 분할을 함께 사용하는 것은 애플리케이션 성능을 향상시키는 데 매우 중요한 요소입니다. 어플리케이션 규모가 커질수록, 초기 로딩 속도 문제를 해결하기 위해 SSR과 코드 분할을 적극적으로 활용하는 것이 좋습니다.

이와 관련된 자세한 정보는 Google Developer’s Documentation에서 확인할 수 있습니다.