[typescript] 타입스크립트와 함께 사용하는 서버 사이드 렌더링 (SSR) 예시

14 Dec 2023

typescript

서버 사이드 렌더링(SSR)은 웹 애플리케이션의 초기 로드 속도를 높이고 SEO(검색 엔진 최적화)를 향상시키기 위한 방법 중 하나입니다. 타입스크립트를 사용하면 강력한 정적 타입 체킹과 코드 가독성을 얻을 수 있으며, SSR과 같은 고도로 복잡한 기술을 구현하는 데 많은 도움이 됩니다.

예시 프로젝트 구조

우리의 예시 프로젝트는 다음과 같이 구성될 것입니다.

project
│
├── src
│   ├── components
│   │   ├── App.tsx
│   │   ├── ...
│   │
│   ├── pages
│       ├── Home.tsx
│       ├── ...
│
├── server
│   ├── index.ts
│   ├── template.html
│   ├── ...
│
├── tsconfig.json
├── package.json
├── ...

위의 구조에서 src 폴더에는 클라이언트 측 코드, server 폴더에는 SSR을 처리하는 서버 측 코드가 들어 있습니다.

프로젝트 설정

# 프로젝트 초기화
npm init -y

# TypeScript 패키지 설치
npm install typescript ts-node @types/node

# Express 및 기타 SSR 관련 패키지 설치
npm install express react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom

프로젝트 초기 설정을 마쳤다면, tsconfig.json에 다음과 같은 옵션을 추가하여 TypeScript 설정을 완료합니다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "esModuleInterop": true,
    "strict": true
  }
}

서버 측 코드 작성

서버 측 코드는 Express 프레임워크를 사용하여 구현됩니다. 예를 들어, index.ts 파일에 다음과 같은 코드를 작성할 수 있습니다.

import express from 'express';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import App from '../src/components/App';
import template from './template.html';

const app = express();

app.use(express.static(path.join(__dirname, '../dist')));

app.get('/*', (req, res) => {
  const context = {};
  const appString = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  res.send(template.replace('<!--app-->', appString));
});

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

위 코드에서는 Express를 사용하여 정적 파일 서빙을 설정하고, 모든 요청에 대해 클라이언트 측 앱을 렌더링한 후 HTML 템플릿에 삽입하여 응답으로 보냅니다. 클라이언트 측 라우팅을 지원하기 위해 StaticRouter를 사용했습니다.

클라이언트 측 코드 작성

클라이언트 측 코드는 기존 React 앱에서 작성하는 것과 비슷하지만, TypeScript를 사용하여 정적 타입 체킹을 활용할 수 있습니다. App.tsx 파일은 다음과 같을 수 있습니다.

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from '../pages/Home';
import NotFound from '../pages/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

마무리

타입스크립트와 서버 사이드 렌더링(SSR)은 함께 사용할 때 강력한 웹 애플리케이션을 만들 수 있습니다. 타입스크립트의 정적 타입 체킹과 SSR의 성능 이점을 결합하여 안정적이고 빠른 애플리케이션을 제작할 수 있습니다.

튜토리얼 출처: TypeScript SSR Tutorial