[javascript] Webpack으로 서버사이드 렌더링 구현하기

29 Nov 2023

javascript

서버사이드 렌더링(Server-Side Rendering, SSR)은 클라이언트 사이드에서 렌더링되는 것과 달리 서버에서 컴포넌트를 렌더링하여 HTML로 바로 전달하는 방식입니다. 이를 통해 초기 로딩 속도 개선과 검색 엔진 최적화(SEO)가 가능해집니다.

이번에는 Webpack을 사용하여 React 애플리케이션의 서버사이드 렌더링을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, 프로젝트 폴더를 생성하고 다음과 같이 초기화합니다.

mkdir server-side-rendering
cd server-side-rendering
npm init -y

다음으로, 필요한 패키지들을 설치합니다.

npm install react react-dom express webpack webpack-cli babel-loader @babel/core @babel/preset-react

2. Webpack 설정

프로젝트 폴더에 webpack.config.js 파일을 생성하고 다음과 같이 설정합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
};

3. 서버 설정

프로젝트 폴더에 server.js 파일을 생성하고 다음과 같이 설정합니다.

// server.js
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
  const appHtml = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Server-Side Rendering</title>
      </head>
      <body>
        <div id="root">${appHtml}</div>
        <script src="/dist/bundle.js"></script>
      </body>
    </html>
  `);
});

app.use(express.static('dist'));

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

4. 빌드 및 실행

프로젝트 폴더에 src 폴더를 생성하고 index.js 파일을 생성하여 다음과 같이 작성합니다.

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

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

빌드를 실행하기 위해 package.json 파일의 scripts 항목을 다음과 같이 수정합니다.

// package.json
"scripts": {
  "build": "webpack",
  "start": "node server.js"
},

이제 프로젝트를 빌드하고 서버를 실행합니다.

npm run build
npm start

웹 브라우저에서 http://localhost:3000에 접속하여 서버사이드 렌더링이 제대로 동작하는지 확인해보세요.

결론

Webpack을 사용하면 React 애플리케이션의 서버사이드 렌더링을 쉽게 구현할 수 있습니다. SSR은 초기 로딩 속도 개선과 SEO에 매우 유용하며, Webpack은 빌드 및 번들링 과정을 간편하게 수행할 수 있도록 도와주는 도구입니다.

더 많은 설정과 기능을 사용하려면 공식 문서에서 자세한 내용을 확인해보세요.

참고자료: