Angular 通过部分水合和 SSR 提高应用性能

angular 18 引入了 partial hydration，这是一种强大的技术，可以与服务器端渲染 (ssr) 结合显着提高应用程序性能。本文深入探讨部分水合的概念、它的好处，以及它如何利用 angular 17 中引入的可延迟视图。

为什么部分水合和 ssr 很重要

传统的 angular 应用程序在预先加载所有 javascript 时通常会遇到性能瓶颈。这会显着影响初始加载时间，特别是对于大型且性能关键的应用程序。通过策略性地减少开始时加载的 javascript 量，我们可以极大地增强用户体验。

部分水合：更智能的 ssr 方法

部分水合建立在 angular 17 中引入的可延迟视图的基础上。angular 现在可以渲染标有 @defer 的指定块的主要内容，而不是在服务器上渲染简单的占位符。其工作原理如下：

1. 服务器端渲染：服务器渲染应用程序的基本内容以及包含组件的@defer块。
2. 客户端水合：当应用程序在客户端运行时，angular 会下载延迟组件所需的 javascript。
3. 选择性激活： 延迟组件仅在满足特定条件时才变为交互式，例如进入用户的视口。

这种方法有几个优点：

• 更快的初始加载时间：通过推迟不必要的 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 可确保流畅且响应灵敏的用户体验，特别是对于复杂且数据量大的应用程序。