构建生产就绪的 SSR React 应用程序

在每一毫秒都至关重要的世界里，服务器端渲染已成为前端应用程序的一项基本功能。

本指南将引导您了解使用 React 构建可用于生产的 SSR 的基本模式。您将了解具有内置 SSR（例如 Next.js）的基于 React 的框架背后的原理，并学习如何创建自己的自定义解决方案。

提供的代码是生产就绪的，具有客户端和服务器部分的完整构建过程，包括 Dockerfile。在此实现中，Vite 用于构建客户端和 SSR 代码，但您可以使用您选择的任何其他工具。 Vite还为客户端提供了开发模式下的热重载。

如果您对此设置的无 Vite 版本感兴趣，请随时与我们联系。

目录

• 什么是SSR
• 创建应用程序
  • 初始化 Vite
  • 更新 React 组件
  • 创建服务器
  • 配置构建
• 路由
• 码头工人
• 结论

什么是SSR

服务器端渲染 (SSR) 是 Web 开发中的一种技术，服务器在将网页发送到浏览器之前生成网页的 HTML 内容。与传统的客户端渲染 (CSR) 不同，JavaScript 在加载空 HTML shell 后在用户设备上构建内容，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 连接以使页面具有交互性。

Hydration 是将事件侦听器和其他动态行为附加到服务器呈现的静态 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 服务器

为开发和生产环境设置不同配置的 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配置

更新您的 Vite 配置以优化构建过程并处理 SSR 依赖项：

// ./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 作为 prop 传递，以根据请求呈现正确的路线。

// ./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）。有关管理延迟加载的模块，请参阅我的另一篇文章，使用流和动态数据的高级 React SSR 技术，链接在底部。

码头工人

这是一个用于容器化您的应用程序的 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。此设置非常适合高效构建登陆页面或小型应用程序。

探索代码

• 示例：react-ssr-basics-example
• 模板：react-ssr-template
• Vite 额外模板: template-ssr-react-ts

相关文章

这是我的 React SSR 系列的一部分。更多文章敬请期待！

• 构建生产就绪的 SSR React 应用程序（您在这里）
• 使用流和动态数据的高级 React SSR 技术（即将推出）
• 在 SSR React 应用程序中设置主题（即将推出）

保持联系

我始终乐于接受反馈、合作或讨论技术想法 - 请随时与我们联系！

• 投资组合：maxh1t.xyz
• 电子邮件：m4xh17@gmail.com