什么是水合
了解水合如何复用服务器生成的 HTML
什么是水合 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
定义水合
水合是指客户端 Angular 应用复用服务器渲染的 HTML，并在现有 DOM 上附加事件监听器和状态，而不是丢弃它并再次渲染的过程。
没有水合时的情况
旧版 SSR 使用破坏式水合：客户端会清除服务器 DOM，然后从头重新渲染。这会造成明显的闪烁，并丢弃服务器已经完成的工作。
非破坏式水合
现代 Angular 会执行非破坏式水合：遍历现有 DOM，将其与组件树匹配，并复用已有节点。这样不会产生闪烁，工作量更少，性能也更好。
为什么能改善指标
复用服务器 HTML 意味着最大内容会保持绘制状态，有助于改善 LCP；同时还能避免重新渲染造成的布局偏移，有助于改善 CLS。应用无需重新绘制即可变成交互状态。
两个阶段
第一阶段：服务器渲染 HTML 并发送给浏览器。第二阶段：浏览器下载 JS，启动 Angular，并对现有标记执行水合，使其具备交互功能。
匹配 DOM 结构
水合假定客户端组件树生成的结构与服务器生成的结构相同。如果二者不一致，Angular 会报告水合不匹配。
// NG0500: During hydration Angular expected <div> but found <span>常见的不匹配原因
直接操作 DOM、会改变标记的仅限浏览器分支、无效的 HTML 嵌套，以及不确定性内容（例如在模板中使用 Math.random() 或 Date.now()）都会导致不匹配。
避免手动编辑 DOM
SSR 期间请勿以命令式方式操作 DOM（例如在 Angular 外部使用 innerHTML）。请让 Angular 管理 DOM，以确保客户端和服务器保持一致。
ngSkipHydration 例外机制
对于确实无法进行水合的组件（例如会修改 DOM 的第三方小部件），可以使用 ngSkipHydration 将其排除；Angular 只会重新渲染该子树。
<app-legacy-widget ngSkipHydration></app-legacy-widget>水合需要 SSR
只有存在可供复用的服务器渲染 HTML 时，水合才适用。纯 CSR 应用没有任何内容可供水合；水合是 SSR 流程中客户端的一半。
接下来是什么
水合可以是完整水合（整个应用在加载时完成水合），也可以是增量水合（各部分按需完成水合）。选择正确的策略是提升性能的关键，后续课程会详细介绍。
快速检查
检查您对水合的理解。
回顾
水合会以非破坏方式在客户端复用服务器 HTML，从而改善 LCP 和 CLS。手动修改 DOM 或生成非确定性的标记可能导致不匹配；您可以使用 ngSkipHydration 作为应急绕过方案。水合是 SSR 流程中客户端的一半。
常见问题解答
「什么是水合」课时是免费的吗？
是的 — 「什么是水合」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「什么是水合」这节课中我会学到什么？
了解水合如何复用服务器生成的 HTML 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「什么是水合」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。