Vite 如何处理服务端渲染 (SSR)？

推荐答案

Vite 通过其内置的 SSR 支持来处理服务端渲染 (SSR)。具体来说，Vite 提供了一个 vite/ssr 模块，允许开发者在服务器端渲染 Vue 或 React 应用。以下是处理 SSR 的关键步骤：

1. 创建 SSR 入口文件：首先，你需要创建一个专门用于 SSR 的入口文件。这个文件通常会导出一个函数，该函数接收请求对象并返回渲染后的 HTML 字符串。

2. 配置 Vite 构建：在 vite.config.js 中，你可以通过配置 ssr 选项来指定 SSR 的入口文件和其他相关配置。

3. 服务器端渲染：在服务器端，使用 vite/ssr 模块来渲染应用。Vite 会处理模块的加载和依赖解析，确保在服务器端正确渲染应用。

4. 客户端激活：在客户端，Vite 会自动处理客户端激活（hydration），确保客户端 JavaScript 能够接管服务器端渲染的 HTML。

本题详细解读

1. 创建 SSR 入口文件

SSR 入口文件通常是一个 JavaScript 文件，它导出一个异步函数。这个函数接收请求对象（如 req 和 res），并返回渲染后的 HTML 字符串。例如：

// www.javascriptcn.com code example
// ssr-entry.js
import { renderToString } from 'vue/server-renderer'
import { createApp } from './main'

export async function render(url) {
  const { app, router } = createApp()
  await router.push(url)
  await router.isReady()
  const html = await renderToString(app)
  return html
}

2. 配置 Vite 构建

在 vite.config.js 中，你可以通过 ssr 选项来配置 SSR 的入口文件。例如：

// vite.config.js
export default {
  ssr: {
    entry: 'src/ssr-entry.js',
  },
}

3. 服务器端渲染

在服务器端，你可以使用 vite/ssr 模块来渲染应用。以下是一个简单的 Express 服务器示例：

// www.javascriptcn.com code example
import express from 'express'
import { createServer } from 'vite'
import { render } from './ssr-entry'

const app = express()

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
})

app.use(vite.middlewares)

app.use('*', async (req, res) => {
  const url = req.originalUrl
  const html = await render(url)
  res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
})

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})

4. 客户端激活

Vite 会自动处理客户端激活（hydration）。你只需要在客户端入口文件中导入应用并挂载到 DOM 上：

// client-entry.js
import { createApp } from './main'

const { app } = createApp()
app.mount('#app')

在 HTML 模板中，确保包含客户端入口文件的脚本标签：

<div id="app"><!-- SSR content will be injected here --></div>
<script type="module" src="/src/client-entry.js"></script>

通过以上步骤，Vite 能够有效地处理服务端渲染 (SSR)，并确保客户端和服务器端的无缝衔接。