使用 @defer 进行增量水合
按需对页面的部分内容进行水合
使用 @defer 进行增量水合 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
完整水合的代价
完整水合会一开始就启动每个组件。增量水合则会按需为页面的各个部分完成水合，将各个区块的 JavaScript 延迟到真正需要时再加载。
基于 defer 构建
增量水合使用带有特殊 hydrate 触发条件的 @defer 区块。服务器仍会渲染内容，但客户端只会在触发条件满足时为其完成水合。
@defer (hydrate on viewport) {
<app-comments />
}启用增量水合
在水合提供者中加入 withIncrementalHydration() 以选择启用。这样即可在模板中使用 hydrate 触发条件。
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
最常见的触发条件是在区块滚动进入视口时为其完成水合。首屏以下的内容会保持休眠状态，直到用户滚动到那里，因而可以节省 JavaScript 工作量。
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
当用户与区块交互（点击、按下键盘按键）时完成水合。这非常适合那些可见但很少使用的控件，例如可展开面板。
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle and timer
使用 hydrate on idle 可在浏览器空闲时完成水合，使用 hydrate on timer(2s) 则可在延迟一段时间后完成水合。这适合非关键区域。
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never 会让服务器渲染的 HTML 保持静态：它会显示出来，但永远不会为该区块加载 JS。这非常适合纯展示、不可交互的内容。
@defer (hydrate never) {
<app-footer-links />
}与普通 defer 的区别
在 CSR 环境中，普通的 @defer 会在内容加载前显示占位内容。使用增量水合时，内容已经由服务器渲染并可见；触发条件只控制何时启用交互能力（水合）。
组合触发条件
您可以组合多个触发条件，使区块在任一条件最先满足时完成水合，在及时可用与节省资源之间取得平衡。
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}减少初始 JS
延迟为大型组件或首屏以下的组件进行水合，可以减少实现交互能力所需的初始 JavaScript，从而改善关键路径上的交互就绪时间和 INP。
明智地选择触发条件
对于首屏内的交互元素，应急切水合或在浏览器空闲时水合；对于首屏以下以及很少使用的控件，应延迟到进入视口或发生交互时再水合。请通过测量确认优化效果。
快速检查
检查您对增量水合的理解。
回顾
您使用 @defer (hydrate ...) 和 withIncrementalHydration()，实现了在进入视口、发生交互、浏览器空闲、计时器触发时水合，或永不水合。通过延迟首屏以下和很少使用的区块进行水合，这种方式减少了初始 JS，并改善了交互能力。
常见问题解答
「使用 @defer 进行增量水合」课时是免费的吗？
是的 — 「使用 @defer 进行增量水合」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「使用 @defer 进行增量水合」这节课中我会学到什么？
按需对页面的部分内容进行水合 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 @defer 进行增量水合」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 什么是水合
- 启用完整水合
- 使用 @defer 进行增量水合
- 测量核心 Web 指标