#Vite SSR 原理

#1. 面试题

Q: Vite 如何处理 SSR？原理是什么？

#2. 核心解答

SSR 的核心思想：在服务端将 Vue/React 组件编译成 HTML 字符串，直接返回给浏览器，然后再在客户端 '脱水' (Hydrate) 成为单页应用。 Vite 提供了原生的 SSR API，极大简化了 SSR 开发流程。

#(1) 构建原理

Vite 在处理 SSR 时，实际上是执行了两次构建：

1. Client Build (客户端构建)：生成 main.js (entry-client) 和静态资源 (images, css)。
   • 负责浏览器端的交互 (Hydration)。
2. Server Build (服务端构建)：生成 server-bundle.js (entry-server)。
   • 负责在 Node.js 环境中运行组件，生成 HTML 字符串。

#(2) 关键流程

1. 请求 HTML：用户访问页面 /。
2. 加载 server-entry：Node 服务器 (如 Express) 加载 server-bundle.js。
3. renderToString：调用框架提供的 renderToString(app) 方法，将组件渲染成 HTML 字符串。
4. 注入 HTML：将生成的 HTML 字符串注入到 index.html 模板中 (替换 <!--ssr-outlet-->)。
5. 发送响应：将完整的 HTML 发送给浏览器。
6. 客户端激活 (Hydrate)：浏览器加载 HTML 后，请求 client-entry.js，Vue/React 接管页面，绑定事件。

#(3) Vite 的优势

• No Bundle Dev Server：开发环境同样使用 Bundleless 模式，修改代码立刻生效 (HMR)，SSR 开发体验极佳。
• Config Sharing：客户端和服务端共用一份 vite.config.ts。

#3. 面试加分项

#Q: 服务端渲染最怕什么？

Node.js 内存泄漏。如果 SSR 代码中创建了全局变量或者无法释放的闭包，导致每个请求都消耗一点内存，最终 Node 进程会崩溃。 Vite 的服务端构建虽然只运行一次，但如果你的代码不规范 (如在组件外 const globalData = [])，依然会有风险。

#4. 总结

• Dual Build: Client & Server bundles.
• Node Runtime: Render string on server.
• Hydration: Client takes over.
• Dev Speed: HMR still works for SSR.