SSR渲染

一、核心概念：什么是 SSR？

服务端渲染（Server-Side Rendering, SSR） 指的是：将原本在客户端（浏览器）执行的页面渲染工作，转移到服务器端完成。

服务器将渲染好的完整 HTML 页面直接发送给客户端，客户端接收到后无需等待 JavaScript 下载和执行就能直接显示内容。

与之相对的是 客户端渲染（Client-Side Rendering, CSR），也就是我们熟悉的 SPA（单页面应用）模式：服务器只发送一个空的 HTML 壳和一堆 JavaScript 文件，由浏览器下载并执行 JS，再由 JS（如 Vue、React）动态生成页面内容。

---

二、工作原理：SSR 与 CSR 的流程对比

让我们通过两张图来直观理解两者的区别。

1. 客户端渲染 (CSR) 流程

这是最常见的 Vue/React SPA 模式。

痛点：步骤 4-8 非常耗时，期间用户看到的是白屏，且不利于搜索引擎（SEO）抓取内容。

2. 服务端渲染 (SSR) 流程

优势：

• 步骤 6：用户几乎立即看到完整内容，首屏加载极快，无白屏。
• 搜索引擎：直接拿到完整 HTML，极利于 SEO。
• 步骤 9：JS 加载完成后，会“激活”静态页面，使其成为可交互的 SPA。

---

三、技术核心：如何实现 SSR？

实现 SSR 并非简单地在服务器上运行一遍 Vue/React 代码，它需要解决几个关键问题：

1. 双端构建与打包

你的应用需要被打包成两份：

• Client Bundle：给浏览器用的，和传统的 SPA 包一样。
• Server Bundle：给服务器用的，它是一套用于渲染组件为 HTML 字符串的代码。

2. 服务器渲染引擎

需要一个 Node.js 服务器（如 Express、Koa）来运行 Server Bundle。

• 当收到页面请求时，服务器会创建并管理一个 Vue/React 应用实例。
• 根据请求的 URL，找到对应的路由组件。
• 可能还会去后端 API 请求数据。
• 调用框架的 SSR API（如 Vue 的 vue-server-renderer，React 的 ReactDOMServer.renderToString()）将组件渲染成 HTML 字符串。
• 最后将这个字符串插入到 HTML 模板中，返回给客户端。

3. 数据预取 (Data Prefetching)

这是 SSR 的难点和精髓。服务器需要在渲染组件前，预先获取到该组件所需的数据。

• 约定方法：为每个页面级组件定义一个异步的 asyncData() 方法。
• 服务器调用：服务器在渲染前，会先调用匹配到的组件的 asyncData() 方法，等待数据返回。
• 注入状态：将获取到的数据序列化后内联到 HTML 中（如放在 window.__INITIAL_STATE__ 变量里）。
• 客户端接管：客户端 Vue/React 在激活页面（Hydration）时，可以直接使用这份数据，而无需再发起同样的数据请求，避免页面“抖动”。

4. 客户端激活 (Hydration - “水合”)

这是最关键也最神奇的一步，它连接了服务器渲染的静态页面和客户端的动态应用。

• 客户端收到服务器渲染的静态 HTML 并显示。
• 随后，它会加载 Client Bundle。
• Vue/React 会接管这个静态页面，将其“激活”。
• 过程：Vue/React 会在这个已有的 DOM 结构上重新执行组件逻辑，附加事件监听器，恢复数据响应性，最终使其变成一个完全交互式的 SPA。
• 要求：服务器生成的 DOM 结构必须与客户端 Vue/React 生成的虚拟 DOM 结构完全一致，否则会出现错误。

---

四、优缺点总结

方面	服务端渲染 (SSR)	客户端渲染 (CSR)
首屏速度	极快，直接显示 HTML	慢，需等待 JS 下载执行
SEO	友好，搜索引擎直接抓取	不友好，需爬虫执行 JS
服务器压力	大，每次请求都需渲染	小，只返回静态文件
开发复杂度	高，需处理双端构建、数据预取等问题	低，流程简单
技术栈	通常需基于特定框架（如 Nuxt.js, Next.js）	任意 Vue/React 项目

五、主流 SSR 框架

由于手动搭建 SSR 环境非常复杂，通常使用成熟的框架：

• Vue 生态：Nuxt.js。它提供了“开箱即用”的 SSR 支持，极大地简化了配置和开发。
• React 生态：Next.js。是 React 的 SSR 首选框架，功能强大且完善。

总结

SSR 的原理可以概括为：“服务器提前帮你把活儿干了”。

1. 服务器收到请求后，执行 JS，预先请求数据，并渲染出包含数据的完整 HTML 字符串，直接返回。
2. 客户端收到后立即展示，然后再加载 JS，进行 Hydration（水合），将静态页面“激活”为动态应用。

它用更高的服务器成本和开发复杂度，换来了卓越的首屏性能和 SEO 效果，是内容驱动型网站（如电商、新闻、博客）的理想选择。