在 vite 中配置 ssr（服务端渲染）需要安装 @vitejs/plugin-react-refresh 或对应的框架插件，并在 vite.config.js 中定义两个独立的构建目标：一个是用于客户端的常规构建，另一个是用于服务端的库模式构建。具体做法是在配置文件中通过 build.rollupoptions.input 指定不同的入口文件，并设置 ssr: true 以启用服务端编译。
如何为 React 应用创建 SSR 构建配置？
对于 React 项目，必须使用 @vitejs/plugin-react 来处理 JSX 转换，并在配置中明确区分客户端和服务端入口。客户端入口通常指向 index.html，而服务端入口则是一个单独的 JS 文件（如 ssr-entry.js），该文件负责导出渲染函数。这样做可以确保服务端代码不包含浏览器特有的 API，同时保持热更新功能。
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
input: {
client: 'index.html',
server: './ssr-entry.js'
}
}
}
})
上述配置定义了 client 和 server 两个入口。运行 vite build --mode ssr 时，Vite 会根据环境变量识别并构建服务端包。服务端入口文件需导出一个 render() 函数，返回 HTML 字符串或流。
立即学习“Java免费学习笔记（深入）”；
SSR 构建中如何处理 CSS 和资源路径？
在服务端构建中，CSS 通常不需要被提取为独立文件，而是直接内联或通过 Node.js 模块导入。关键在于配置 base 选项以确保资源路径正确。对于 SSR，建议将 base 设置为相对路径或空字符串，以避免绝对路径导致的跨域问题。此外，静态资源应通过 /assets/ 前缀访问，确保 CDN 或服务器能正确解析。
// ssr-entry.js
import React from 'react'
import App from './App'
export function render() {
return React.createElement(App)
}
此示例展示了服务端入口的基本结构。它不依赖 DOM，仅返回 React 元素。在实际应用中，需结合 react-dom/server 的 renderToString 方法生成 HTML 字符串。注意，CSS 应在客户端构建时处理，服务端只需确保样式表链接正确。
SSR 构建后如何验证输出结果？
验证 SSR 构建的关键是检查生成的 dist/ssr/ 目录是否包含正确的 JS 文件和源映射。运行构建命令后，查看 package.json 中的 scripts 部分，确保有 build:ssr 脚本调用 vite build --mode ssr。输出结果应包含一个可执行的 Node.js 模块，可直接通过 require 或 import 加载。
