一、什么是 SSR？

SSR（Server-Side Rendering，服务端渲染） 是指在服务器上将页面的结构和数据预先渲染成完整的 HTML 字符串，并返回给浏览器。

✅ 用户请求 → 服务器生成含内容的 HTML → 浏览器直接展示

SSR 的优势：

  • 首屏加载快：用户无需等待 JavaScript 下载执行即可看到内容。
  • SEO 友好：搜索引擎爬虫可以直接抓取已渲染的内容。
  • 更好的用户体验：尤其在网络较差或设备性能较低时表现更佳。

二、SSR 返回的是“静态”HTML

服务器返回的 HTML 是包含实际内容的静态结构，例如：

1
2
3
4
5
6
7
8
9
<html>
  <body>
    <div id="app">
      <h1>欢迎来到我的网站</h1>
      <p>这是从数据库获取的数据</p>
    </div>
    <script src="/assets/client.js" defer></script>
  </body>
</html>

⚠️ 但此时的页面是“死的”——没有事件监听、无法响应用户交互（如点击、输入等）。

三、什么是 Hydration（注水）？

为了让静态 HTML 变成可交互的动态应用，浏览器需要加载并执行客户端 JavaScript，将交互逻辑“注入”到已有 DOM 中。这个过程称为 Hydration（注水）。

💧 Hydration = 客户端 JS “激活”服务端渲染的静态页面

四、SSR + Hydration 的完整流程 🔍

步骤 过程描述
1️⃣ 服务器端渲染（SSR）
- 接收用户请求
- 获取数据（API、数据库等）
- 使用框架（React/Vue）将数据注入组件
- 渲染为完整 HTML 字符串
- 返回 HTML 给浏览器
2️⃣ 浏览器解析 HTML
- 浏览器接收到 HTML 后立即解析并构建 DOM
- 快速显示页面内容（首屏可见）
- 用户此时可阅读内容，但页面尚无交互能力
3️⃣ 发现并下载客户端 JS
- HTML 中包含 <script src="/assets/client.js" defer>
- 浏览器自动发起请求，下载客户端 JavaScript Bundle
- 包含：框架代码、组件逻辑、事件处理、路由、状态管理等
4️⃣ 执行 JS 并进行 Hydration（注水）
- 客户端框架启动
- 框架检查已有 DOM 结构（不重新创建）
- 为 DOM 元素绑定事件、建立响应式系统、连接状态
- “激活”整个页面，使其具备交互能力
5️⃣ 页面完全激活
- 注水完成后，页面成为一个完整的单页应用（SPA）
- 后续操作（如路由跳转、按钮点击）均由客户端处理，无需刷新页面

五、关键点强调 ❗

✅ 不是“二次请求”获取 JS

  • JavaScript 的加载是由 HTML 中的 <script> 标签自动触发的。
  • 整个流程是连续的：
    HTML 返回 → 浏览器解析 → 发现 script → 下载 JS → 执行 → Hydration

✅ Hydration 不会重建 DOM

  • 客户端框架会尝试复用服务端已生成的 DOM 结构。
  • 若客户端与服务端渲染结果不一致，可能导致 Hydration 错误（如 React/Vue 警告）。

✅ 构建时需输出两个 Bundle

  • Server Bundle：用于服务端渲染 HTML
  • Client Bundle：用于浏览器端 Hydration（通过 <script> 引入）

六、总结对比

特性 SSR CSR（客户端渲染）
首屏速度 快（HTML 含内容） 慢（需等 JS 下载执行）
SEO 好 差（爬虫难抓 JS 内容）
交互性 通过 Hydration 实现 完全由 JS 控制
网络消耗 初始 HTML 较大 初始 HTML 小，JS 负载大

🔗 现代框架实践：Next.js（React）、Nuxt.js（Vue）等均基于 SSR + Hydration 模式实现高性能、高可用的 Web 应用。

📌 一句话总结：
服务端生成静态 HTML -> 浏览器快速展示 -> 下载并执行客户端 JS -> JS 代码进行“注水” -> （核心动作）为现有 DOM 元素添加上事件监听器 -> 应用被完全激活，后续交互由客户端全权负责。