[typescript] 웹팩으로 타입스크립트와 서버 사이드 렌더링 연동하기

11 Dec 2023

typescript

서버 측 렌더링(SSR)은 검색 엔진 최적화(SEO) 및 성능 향상을 위해 중요합니다. 타입스크립트로 작성된 프로젝트에서 웹팩(Webpack)을 사용하여 서버 측 렌더링을 구현하는 방법에 대해 살펴보겠습니다.

웹팩 구성하기

먼저, 타입스크립트 및 서버 측 렌더링에 필요한 웹팩 구성을 설정해보겠습니다. webpack.config.js 파일을 생성하고 다음과 같이 구성합니다:

const path = require('path');

module.exports = {
  entry: './src/server/index.tsx',
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.js',
    libraryTarget: 'commonjs2',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
    ],
  },
};

위의 구성은 서버 측 렌더링을 위한 타입스크립트 파일(index.tsx)을 진입점(entry)으로 지정하고, target을 node로 설정하며, output을 통해 번들링된 파일을 지정된 경로에 생성합니다. 또한, ts-loader를 사용하여 타입스크립트 파일을 로드하도록 구성하였습니다.

Express 서버 구성

이제 Express 서버를 구성하여 서버 측 렌더링을 처리할 수 있도록 합니다. server.ts 파일을 생성하고 다음과 같이 구성합니다:

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

const server = express();
server.use(express.static('dist'));

server.get('/', (req, res) => {
  const app = renderToString(<App />);
  res.send(`
    <html>
      <head><title>SSR with TypeScript and Webpack</title></head>
      <body>
        <div id="app">${app}</div>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

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

위의 코드에서는 Express를 사용하여 정적 파일 경로를 설정하고, 루트 경로(/)로 들어오는 요청에 대해 React 앱을 서버 측 렌더링하여 응답으로 보내주도록 구성하였습니다.

결론

이제 타입스크립트 및 웹팩을 사용하여 서버 측 렌더링을 구현하는 방법에 대해 알아봤습니다. 이를 통해 프로젝트의 성능을 향상시키고 SEO를 개선할 수 있습니다.

참고 문헌:

https://webpack.js.org/
https://expressjs.com/
https://reactjs.org/