React SSR、Hydration 与服务端组件
React 中 SSR、hydration 与服务端组件三者的区别与关系，以及它们各自解决的问题。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
React SSR、Hydration 与服务端组件
这三个词经常被一起提，但它们不是同一层的概念。如果混在一起讲，面试里很容易越说越乱。
一句话定义
SSR 解决的是首屏 HTML 什么时候生成；hydration 解决的是这份 HTML 什么时候被客户端接管；服务端组件解决的是哪些组件逻辑可以留在服务端、减少进入客户端的负担。
为什么它们容易混
- 都和“服务端先做点事”有关
- 都会影响首屏体验和客户端体积
- 但它们分别回答的是不同问题
三者分别在回答什么
SSR
- 先在服务端产出 HTML
- 让用户更早看到首屏内容
Hydration
- 客户端接管服务端已输出的 HTML
- 恢复组件逻辑、事件和后续更新能力
服务端组件
- 决定哪些组件逻辑不必进入浏览器
- 把不依赖交互的内容尽量留在服务端组织
应该怎么理解它们的关系
- SSR 关注“先把页面画出来”
- hydration 关注“画出来之后怎么接活”
- 服务端组件关注“哪些东西本来就不该进客户端”
一个很实用的回答顺序
- 先说 SSR：提前返回首屏 HTML
- 再说 hydration：客户端接手这份 HTML
- 最后说服务端组件：减少需要客户端接手的那部分逻辑
常见误区
- 把服务端组件当成 SSR 的另一个叫法
- 以为有了 SSR 就自动没有 hydration 成本
- 以为服务端组件和客户端组件是二选一，而不是职责拆分
最短记忆方式
SSR 先画，hydration 再接，服务端组件负责少送不必要的东西去客户端。
面试要点
来自 react-ssr-vs-hydration-vs-server-components-interview-question 的面试视角整理。
一句话回答
SSR 解决的是首屏 HTML 提前生成，hydration 解决的是客户端如何接管这份 HTML，服务端组件解决的是哪些组件逻辑可以留在服务端、减少进入浏览器的负担。它们相关，但不是同一层概念。
最稳的回答主线
- 先说 SSR：让首屏更早可见
- 再说 hydration：让页面真正恢复交互
- 再说服务端组件：让不需要交互的逻辑别进客户端
- 最后补一句：三者是串起来协作，不是互相替代
一个更完整的面试表达
可以这样答：
这三个词经常被混在一起，但其实不在一个层面。SSR 解决的是“首屏 HTML 提前生成”；hydration 解决的是“客户端怎么接管这份 HTML，让页面真的活起来”；服务端组件解决的是“哪些组件逻辑根本没必要进入浏览器”。
所以它们是串联协作关系，不是谁替代谁。
一个更容易记的版本
- SSR：先画出来
- hydration：再接活起来
- 服务端组件：能不送客户端的就别送
一个常见误区
很多人会以为：
- 有了 SSR 就不需要 hydration
- 有了服务端组件就不需要客户端组件
这都不对。
因为：
- 有交互的页面仍然需要客户端接管
- 有点击、输入、effect 的逻辑仍然必须在客户端
面试里容易加分的一句
很多人把这三个词当成一件事，其实它们分别对应“先画出来”“接活起来”“少送过去”三种不同目标。
常见追问
- 为什么有了 SSR 页面还要 hydration
- 服务端组件和传统 SSR 到底差在哪
- 服务端组件能不能完全替代客户端组件
最短记忆方式
SSR 先画，hydration 接活，服务端组件负责少送。