前端
水合Hydration
你可能会问
水合到底是什么？页面明明显示出来了，为什么按钮还要再等一下才能点？
简单来说
在浏览器中为服务端生成的静态 HTML 接上 JavaScript 交互能力。
两份材料
page.html已经能看
app.js加载中…已就绪
立即订阅能看，还不能点已激活，可以点了从「能看」到「能用」
01 · 先这样理解
把抽象概念放进真实场景
在浏览器中为服务端生成的静态 HTML 接上 JavaScript 交互能力。
换个角度想水合像样板间通电：家具早就摆好了，看上去和成品一模一样；电工把线接上之后，灯才真的能开、门铃才真的会响。
02 · 点击演示
同一个按钮，水合前后差在哪？
突出显示的部分，就是当前概念在整条流程中负责的位置。
app.js ▂▄▆ 下载中
页面照常显示
addEventListener('click')
接到已有的按钮上
- 同一个页面，现在能用了
1 / 4
Server · 服务端渲染好 HTML
03 · 放进真实任务
什么时候会遇到它
首屏加速
服务端直出让用户先看到内容，不用盯着白屏等 JS。
排查失灵
页面显示正常但点不动，多半是水合没完成或失败了。
按需水合
只给需要交互的组件接线，纯展示的部分保持零 JS。
04 · 想一想
用一个问题检查理解
用户反馈：页面秒开，但头两秒点按钮没反应。这是坏了吗？
查看答案
不一定——这是水合窗口期：HTML 已经显示，JavaScript 还没接管。减小 JS 体积、优先水合关键按钮，可以把这个窗口压短。
最容易踩的坑
水合要求 JS 渲染出的结构和服务端 HTML 完全对得上，对不上就会报错或页面闪变。窗口期越长，用户越容易点了没反应——别把水合当免费午餐。