생산 준비가 완료된 SSR React 애플리케이션 구축

1밀리초가 중요한 세상에서 서버 측 렌더링은 프런트엔드 애플리케이션의 필수 기능이 되었습니다.

이 가이드는 React를 사용하여 프로덕션에 바로 사용할 수 있는 SSR을 구축하기 위한 기본 패턴을 안내합니다. SSR(예: Next.js)이 내장된 React 기반 프레임워크의 기본 원리를 이해하고 자신만의 맞춤형 솔루션을 만드는 방법을 배우게 됩니다.

제공된 코드는 프로덕션 준비가 되어 있으며 Dockerfile을 포함하여 클라이언트와 서버 부분 모두에 대한 완전한 빌드 프로세스를 갖추고 있습니다. 이 구현에서 Vite는 클라이언트 및 SSR 코드를 빌드하는 데 사용되지만 원하는 다른 도구를 사용할 수도 있습니다. Vite는 클라이언트의 개발 모드 중에 핫 리로딩도 제공합니다.

Vite가 없는 이 설정 버전에 관심이 있으시면 언제든지 문의해 주세요.

목차

• SSR이란
• 앱 만들기
  • Vite 초기화 중
  • React 구성 요소 업데이트
  • 서버 생성
  • 빌드 구성
• 라우팅
• 도커
• 결론

SSR이란 무엇입니까?

서버 측 렌더링(SSR)은 서버가 웹 페이지의 HTML 콘텐츠를 브라우저에 보내기 전에 생성하는 웹 개발 기술입니다. JavaScript가 빈 HTML 셸을 로드한 후 사용자 기기에 콘텐츠를 구축하는 기존 클라이언트 측 렌더링(CSR)과 달리 SSR은 서버에서 바로 완전히 렌더링된 HTML을 제공합니다.

SSR의 주요 이점:

• 향상된 SEO: 검색 엔진 크롤러는 완전히 렌더링된 콘텐츠를 수신하므로 SSR은 더 나은 색인 생성 및 순위입니다.
• 빠른 첫 번째 페인트: 서버가 무거운 작업을 처리하므로 사용자는 거의 즉시 의미 있는 콘텐츠를 볼 수 있습니다. 렌더링합니다.
• 향상된 성능: SSR은 브라우저의 렌더링 작업량을 줄여 웹사이트에 더욱 원활한 환경을 제공합니다. 오래되거나 성능이 떨어지는 장치를 사용하는 사용자.
• 원활한 서버-클라이언트 데이터 전송: SSR을 사용하면 동적 서버 측 데이터를 클라이언트에 전달할 필요 없이 클라이언트 번들을 재구축합니다.

앱 만들기

SSR을 사용하는 앱의 흐름은 다음 단계를 따릅니다.

1. 템플릿 HTML 파일을 읽어보세요.
2. React를 초기화하고 앱 콘텐츠의 HTML 문자열을 생성합니다.
3. 생성된 HTML 문자열을 템플릿에 삽입합니다.
4. 완전한 HTML을 브라우저로 보냅니다.
5. 클라이언트에서 HTML 태그를 일치시키고 애플리케이션에 수분을 공급하여 대화형으로 만듭니다.

VITE 초기화 중

저는 pnpm 및 React-swc-ts Vite 템플릿을 선호하지만 다른 설정을 선택할 수도 있습니다.

pnpm create vite react-ssr-app --template react-swc-ts

종속성 설치:

pnpm create vite react-ssr-app --template react-swc-ts

React 구성 요소 업데이트

일반적인 React 애플리케이션에는 index.html에 대한 단일 main.tsx 진입점이 있습니다. SSR을 사용하려면 두 개의 진입점이 필요합니다. 하나는 서버용이고 다른 하나는 클라이언트용입니다.

서버 진입점

Node.js 서버는 앱을 실행하고 React 구성 요소를 문자열(renderToString)로 렌더링하여 HTML을 생성합니다.

pnpm install

클라이언트 진입점

브라우저는 서버에서 생성된 HTML을 수화하여 JavaScript와 연결하여 페이지를 대화형으로 만듭니다.

하이드레이션은 서버에서 렌더링한 정적 HTML에 이벤트 리스너 및 기타 동적 동작을 연결하는 프로세스입니다.

// ./src/entry-server.tsx
import { renderToString } from 'react-dom/server'
import App from './App'

export function render() {
  return renderToString(<app></app>)
}

index.html 업데이트 중

프로젝트 루트에 있는 index.html 파일을 업데이트하세요. 자리 표시자는 서버가 생성된 HTML을 삽입하는 곳입니다.

// ./src/entry-client.tsx
import { hydrateRoot } from 'react-dom/client'
import { StrictMode } from 'react'
import App from './App'

import './index.css'

hydrateRoot(
  document.getElementById('root')!,
  <strictmode>
    <app></app>
  </strictmode>,
)

서버에 필요한 모든 종속성은 클라이언트 번들에 포함되지 않도록 개발 종속성(devDependency)으로 설치해야 합니다.

다음으로, 프로젝트 루트에 ./server라는 폴더를 만들고 다음 파일을 추가하세요.

주 서버 파일 다시 내보내기

메인 서버 파일을 다시 내보냅니다. 이렇게 하면 명령 실행이 더욱 편리해집니다.

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React + TS</title>
  
  
    <div>



<h3>
  
  
  Create Server
</h3>

<p>First, install the dependencies:<br>
</p>

<pre class="brush:php;toolbar:false">pnpm install -D express compression sirv tsup vite-node nodemon @types/express @types/compression

상수 정의

HTML_KEY 상수는 index.html의 자리표시자 주석과 일치해야 합니다. 다른 상수는 환경 설정을 관리합니다.

// ./server/index.ts
export * from './app'

익스프레스 서버 생성

개발 및 프로덕션 환경에 맞게 다양한 구성으로 Express 서버를 설정하세요.

// ./server/constants.ts
export const NODE_ENV = process.env.NODE_ENV || 'development'
export const APP_PORT = process.env.APP_PORT || 3000

export const PROD = NODE_ENV === 'production'
export const HTML_KEY = `<!--app-html-->`

개발 모드 구성

개발 중에는 Vite의 미들웨어를 사용하여 요청을 처리하고 핫 리로드를 통해 index.html 파일을 동적으로 변환합니다. 서버는 React 애플리케이션을 로드하고 각 요청마다 HTML로 렌더링합니다.

// ./server/app.ts
import express from 'express'
import { PROD, APP_PORT } from './constants'
import { setupProd } from './prod'
import { setupDev } from './dev'

export async function createServer() {
  const app = express()

  if (PROD) {
    await setupProd(app)
  } else {
    await setupDev(app)
  }

  app.listen(APP_PORT, () => {
    console.log(`http://localhost:${APP_PORT}`)
  })
}

createServer()

생산 모드 구성

프로덕션에서는 압축을 사용하여 성능을 최적화하고 sirv를 사용하여 정적 파일을 제공하며 사전 구축된 서버 번들을 사용하여 앱을 렌더링합니다.

// ./server/dev.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import { HTML_KEY } from './constants'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

export async function setupDev(app: Application) {
  // Create a Vite development server in middleware mode
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  // Use Vite middleware for serving files
  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      // Read and transform the HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      // Load the entry-server.tsx module and render the app
      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Fix stack traces for Vite and handle errors
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

빌드 구성

애플리케이션 구축 모범 사례를 따르려면 불필요한 패키지를 모두 제외하고 애플리케이션에서 실제로 사용하는 패키지만 포함해야 합니다.

Vite 구성 업데이트 중

빌드 프로세스를 최적화하고 SSR 종속성을 처리하려면 Vite 구성을 업데이트하세요.

// ./server/prod.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import compression from 'compression'
import sirv from 'sirv'
import { HTML_KEY } from './constants'

const CLIENT_PATH = path.resolve(process.cwd(), 'dist/client')
const HTML_PATH = path.resolve(process.cwd(), 'dist/client/index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'dist/ssr/entry-server.js')

export async function setupProd(app: Application) {
  // Use compression for responses
  app.use(compression())
  // Serve static files from the client build folder
  app.use(sirv(CLIENT_PATH, { extensions: [] }))

  app.get('*', async (_, res, next) => {
    try {
      // Read the pre-built HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')

      // Import the server-side render function and generate HTML
      const { render } = await import(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Log errors and pass them to the error handler
      console.error((e as Error).stack)
      next(e)
    }
  })
}

tsconfig.json 업데이트 중

서버 파일을 포함하도록 tsconfig.json을 업데이트하고 TypeScript를 적절하게 구성하세요.

pnpm create vite react-ssr-app --template react-swc-ts

tsup 구성 생성 중

TypeScript 번들러인 tsup을 사용하여 서버 코드를 빌드합니다. noExternal 옵션은 서버와 함께 번들로 제공할 패키지를 지정합니다. 서버에서 사용하는 추가 패키지를 반드시 포함하세요.

pnpm install

빌드 스크립트 추가

// ./src/entry-server.tsx
import { renderToString } from 'react-dom/server'
import App from './App'

export function render() {
  return renderToString(<app></app>)
}

애플리케이션 실행

개발: 핫 리로딩으로 애플리케이션을 시작하려면 다음 명령을 사용하세요.

// ./src/entry-client.tsx
import { hydrateRoot } from 'react-dom/client'
import { StrictMode } from 'react'
import App from './App'

import './index.css'

hydrateRoot(
  document.getElementById('root')!,
  <strictmode>
    <app></app>
  </strictmode>,
)

프로덕션: 애플리케이션 빌드 및 프로덕션 서버 시작:

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React + TS</title>
  
  
    <div>



<h3>
  
  
  Create Server
</h3>

<p>First, install the dependencies:<br>
</p>

<pre class="brush:php;toolbar:false">pnpm install -D express compression sirv tsup vite-node nodemon @types/express @types/compression

SSR이 작동하는지 확인하려면 서버에 대한 첫 번째 네트워크 요청을 확인하세요. 응답에는 애플리케이션의 완전히 렌더링된 HTML이 포함되어야 합니다.

라우팅

앱에 다른 페이지를 추가하려면 라우팅을 올바르게 구성하고 클라이언트 및 서버 진입점 모두에서 이를 처리해야 합니다.

// ./server/index.ts
export * from './app'

클라이언트 측 라우팅 추가

클라이언트측 라우팅을 활성화하려면 클라이언트 진입점에서 BrowserRouter로 애플리케이션을 래핑하세요.

// ./server/constants.ts
export const NODE_ENV = process.env.NODE_ENV || 'development'
export const APP_PORT = process.env.APP_PORT || 3000

export const PROD = NODE_ENV === 'production'
export const HTML_KEY = `<!--app-html-->`

서버측 라우팅 추가

서버 측 라우팅을 처리하려면 서버 진입점에서 StaticRouter를 사용하세요. 요청에 따라 올바른 경로를 렌더링하려면 URL을 소품으로 전달하세요.

// ./server/app.ts
import express from 'express'
import { PROD, APP_PORT } from './constants'
import { setupProd } from './prod'
import { setupDev } from './dev'

export async function createServer() {
  const app = express()

  if (PROD) {
    await setupProd(app)
  } else {
    await setupDev(app)
  }

  app.listen(APP_PORT, () => {
    console.log(`http://localhost:${APP_PORT}`)
  })
}

createServer()

서버 구성 업데이트

요청 URL을 렌더링 기능에 전달하도록 개발 및 프로덕션 서버 설정을 모두 업데이트하세요.

// ./server/dev.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import { HTML_KEY } from './constants'

const HTML_PATH = path.resolve(process.cwd(), 'index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'src/entry-server.tsx')

export async function setupDev(app: Application) {
  // Create a Vite development server in middleware mode
  const vite = await (
    await import('vite')
  ).createServer({
    root: process.cwd(),
    server: { middlewareMode: true },
    appType: 'custom',
  })

  // Use Vite middleware for serving files
  app.use(vite.middlewares)

  app.get('*', async (req, res, next) => {
    try {
      // Read and transform the HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')
      html = await vite.transformIndexHtml(req.originalUrl, html)

      // Load the entry-server.tsx module and render the app
      const { render } = await vite.ssrLoadModule(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Fix stack traces for Vite and handle errors
      vite.ssrFixStacktrace(e as Error)
      console.error((e as Error).stack)
      next(e)
    }
  })
}

이러한 변경 사항을 통해 이제 React 앱에서 SSR과 완벽하게 호환되는 경로를 생성할 수 있습니다. 그러나 이 기본 접근 방식은 지연 로드된 구성 요소(React.lazy)를 처리하지 않습니다. 지연 로드된 모듈을 관리하려면 하단에 링크된 다른 기사 Advanced React SSR Techniques with Streaming and Dynamic Data를 참조하세요.

도커

애플리케이션을 컨테이너화하기 위한 Dockerfile은 다음과 같습니다.

// ./server/prod.ts
import { Application } from 'express'
import fs from 'fs'
import path from 'path'
import compression from 'compression'
import sirv from 'sirv'
import { HTML_KEY } from './constants'

const CLIENT_PATH = path.resolve(process.cwd(), 'dist/client')
const HTML_PATH = path.resolve(process.cwd(), 'dist/client/index.html')
const ENTRY_SERVER_PATH = path.resolve(process.cwd(), 'dist/ssr/entry-server.js')

export async function setupProd(app: Application) {
  // Use compression for responses
  app.use(compression())
  // Serve static files from the client build folder
  app.use(sirv(CLIENT_PATH, { extensions: [] }))

  app.get('*', async (_, res, next) => {
    try {
      // Read the pre-built HTML file
      let html = fs.readFileSync(HTML_PATH, 'utf-8')

      // Import the server-side render function and generate HTML
      const { render } = await import(ENTRY_SERVER_PATH)
      const appHtml = await render()

      // Replace the placeholder with the rendered HTML
      html = html.replace(HTML_KEY, appHtml)
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      // Log errors and pass them to the error handler
      console.error((e as Error).stack)
      next(e)
    }
  })
}

Docker 이미지 빌드 및 실행

// ./vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { dependencies } from './package.json'

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  ssr: {
    noExternal: mode === 'production' ? Object.keys(dependencies) : undefined,
  },
}))

{
  "include": [
    "src",
    "server",
    "vite.config.ts"
  ]
}

결론

이 가이드에서는 React를 사용하여 프로덕션에 바로 사용할 수 있는 SSR 애플리케이션을 만들기 위한 강력한 기반을 구축했습니다. 프로젝트 설정, 라우팅 구성, Dockerfile 생성 방법을 배웠습니다. 이 설정은 랜딩 페이지나 소규모 앱을 효율적으로 구축하는 데 이상적입니다.

코드 탐색

• 예: 반응-ssr-기본-예
• 템플릿: 반응-ssr-템플릿
• Vite Extra 템플릿: template-ssr-react-ts

관련 기사

이것은 React를 사용한 SSR 시리즈의 일부입니다. 더 많은 기사를 기대해주세요!

• 생산 준비가 완료된 SSR React 애플리케이션 구축(현재 위치)
• 스트리밍 및 동적 데이터를 사용한 고급 React SSR 기술(출시 예정)
• SSR React 애플리케이션에서 테마 설정(출시 예정)

연결 상태 유지

저는 항상 피드백, 협업 또는 기술 아이디어 논의에 열려 있습니다. 언제든지 연락주세요!

• 포트폴리오: maxh1t.xyz
• 이메일: m4xh17@gmail.com