angular 18 引入了 partial hydration，这是一种强大的技术，可以与服务器端渲染 (ssr) 结合显着提高应用程序性能。本文深入探讨部分水合的概念、它的好处，以及它如何利用 angular 17 中引入的可延迟视图。
为什么部分水合和 ssr 很重要
传统的 angular 应用程序在预先加载所有 javascript 时通常会遇到性能瓶颈。这会显着影响初始加载时间，特别是对于大型且性能关键的应用程序。通过策略性地减少开始时加载的 javascript 量，我们可以极大地增强用户体验。
部分水合：更智能的 ssr 方法
部分水合建立在 angular 17 中引入的可延迟视图的基础上。angular 现在可以渲染标有 @defer 的指定块的主要内容，而不是在服务器上渲染简单的占位符。其工作原理如下：
- 服务器端渲染：服务器渲染应用程序的基本内容以及包含组件的@defer块。
- 客户端水合：当应用程序在客户端运行时，angular 会下载延迟组件所需的 javascript。
- 选择性激活： 延迟组件仅在满足特定条件时才变为交互式，例如进入用户的视口。
这种方法有几个优点：
- 更快的初始加载时间：通过推迟不必要的 javascript，用户可以体验更快的初始页面加载。
- 改进的感知：应用程序感觉响应更快，因为核心功能立即可用。
- 减少数据消耗：较小的初始 javascript 负载意味着较低的数据使用量。
实现部分水合作用
利用部分水合作用很简单。这是一个例子：
{
@defer (render on server; on viewport) {
<my-deferrable-component></my-deferrable-component>
}
}
在此示例中：
- my-deferrable-component 在服务器上渲染。
- 客户端，angular 下载组件所需的 javascript。
- 与 my-deferrable-component 的交互仅在进入视口时发生，从而优化渲染和性能。
结论
部分水合使 angular 开发人员能够创建高性能且用户友好的应用程序。通过根据用户交互或可见性策略性地推迟组件水合作用，angular 18 可确保流畅且响应灵敏的用户体验，特别是对于复杂且数据量大的应用程序。
