vite 原生支持 vue/react ssr，需分离客户端与服务端入口、配置双入口（entry-client.ts 和 entry-server.ts）、启用 build.ssr，结合 express 实现 html 拼装与水合。
在 Vite 中配置 Vue 或 React 的服务端渲染（SSR）并实现同构构建，核心是分离客户端与服务端入口、启用 Vite 内置 SSR 支持、配合 Node.js 服务器完成 HTML 拼装与水合。整个流程不依赖第三方插件，Vite 原生已提供完整能力。
配置双入口与通用应用逻辑
同构的关键在于“一份代码，两端运行”。需将原本单一的 main.ts 抽离为三个部分：
-
通用逻辑（
src/main.ts）：只负责创建应用实例，不涉及挂载或渲染，确保可在 Node.js 和浏览器中无副作用执行 -
客户端入口（
src/entry-client.ts）：调用createSSRApp并.mount('#app')，启动水合（hydration） -
服务端入口（
src/entry-server.ts）：导出createApp()工厂函数，返回带预设状态的app实例，供renderToString使用
示例 entry-server.ts：
import { createSSRApp } from 'vue'<br>import App from './App.vue'<br><br>export function createApp() {<br> const app = createSSRApp(App)<br> // 可在此注入 router、store、pinia 等，并预取数据<br> return { app }<br>}
启用 Vite SSR 构建配置
在 vite.config.ts 中启用 SSR 模式，指定服务端入口文件：
- 设置
build.ssr: true或build.ssr: './src/entry-server.ts'，触发服务端专用打包 - Vite 会自动处理
node_modules中仅服务端可用的依赖（如fs、path），并标记process.env.NODE_ENV等环境变量 - 开发时无需手动启动两个服务，Vite 中间件模式可联动热更新客户端与服务端 bundle
注意：服务端 bundle 输出默认为 dist/server/entry-server.js（ESM 格式），需确保 Node.js 版本 ≥ 18.12+ 或启用 type: "module"。
搭建 Express 渲染服务
用 Express 承载 SSR 逻辑，关键在于：
- 读取服务端 bundle（
dist/server/entry-server.js），动态import()获取createApp - 根据请求 URL 匹配路由，执行组件级
asyncData或 store 预取逻辑 - 调用
renderToString(app)得到 HTML 字符串，注入初始状态（window.__INITIAL_STATE__） - 拼接完整 HTML，返回给浏览器；客户端脚本加载后自动执行水合
示例响应片段：
<br><br><br><div id="app"></div><br><script>window.__INITIAL_STATE__ = <%= JSON.stringify(initialState) %></script><br><script type="module" src="/client/client-bundle.js"></script><br>
处理服务端专属逻辑与数据预取
利用 import.meta.env.SSR 进行编译期条件判断，避免客户端执行服务端代码：
- 数据库连接、文件读取、
fetch调用等仅在服务端执行 - 路由守卫中可调用
router.push()触发重定向，但需注意客户端不会重复执行 - 推荐使用组合式 API 封装
useAsyncData，在setup()中统一管理预取逻辑，保持组件内聚
例如，在组件中：
export default {<br> async setup() {<br> if (import.meta.env.SSR) {<br> // 服务端：同步获取数据，注入上下文<br> const data = await api.getPost(1)<br> useStore().setPost(data)<br> }<br> return () => h('div', 'content')<br> }<br>}Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
