[typescript] 타입스크립트와 Babel을 사용한 서버 사이드 렌더링 설정 방법

20 Dec 2023

typescript

서버 사이드 렌더링(SSR)은 웹 애플리케이션의 초기 로딩 성능을 향상시키고 SEO(검색 엔진 최적화)를 개선하는 데 도움을 줍니다. 이 글에서는 타입스크립트 및 Babel을 이용하여 서버 사이드 렌더링 설정하는 방법에 대해 알아보겠습니다.

1. 프로젝트 초기화 및 의존성 설치

먼저, 타입스크립트 프로젝트를 초기화하고 필요한 패키지를 설치합니다.

mkdir ssr-app  
cd ssr-app  
npm init -y  
npm install express react react-dom @types/node @types/react @types/react-dom typescript babel-cli babel-preset-env babel-preset-react

2. Babel 및 타입스크립트 설정

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고 다음과 같이 설정합니다.

{
  "presets": ["env", "react"]
}

그리고 tsconfig.json 파일을 생성하여 타입스크립트 설정을 구성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "./dist",
    "strict": true
  }
}

3. Express 서버 구성

서버 코드는 app.tsx 파일에 작성합니다.

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

const server = express();

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

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

4. 빌드 및 실행

마지막으로, package.json 파일에 빌드 및 실행 스크립트를 추가합니다.

{
  "scripts": {
    "build": "tsc && babel server.js -o dist/server.js",
    "start": "node dist/server.js"
  }
}

이제 npm run build로 프로젝트를 빌드하고, npm start로 서버를 실행할 수 있습니다.

이제 타입스크립트와 Babel을 사용하여 서버 사이드 렌더링을 구성하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션의 초기 로딩 성능을 최적화할 수 있습니다.

참고 문헌: