下面我把 **SSR（Server-Side Rendering，服务端渲染）**讲到“你能用它做架构决策、能排障、能优化”的程度。结构会非常系统：它是什么 → 浏览器与服务器发生了什么 → 为什么快/慢 → 数据与缓存怎么设计 → Hydration 税怎么减 → 什么时候该用/不该用 → 常见坑与验证手段。

1）SSR 到底是什么（架构定义）

SSR = 页面首次请求时，由服务器把 UI 渲染成 HTML 返回给浏览器。

关键点：

• 服务器返回的 HTML 已经包含首屏内容（不是空壳）
• 浏览器拿到 HTML 后能立刻“看见内容”
• 但要变成“可交互的 React 应用”，还需要客户端加载 JS 并进行 Hydration（水合/注水接管）

SSR ≠ 纯静态 HTML SSR = “服务端先把内容画出来” + “客户端再接管交互”