Angular小博客

分享让你更聪明

[译2023]Angular 中服务器端渲染的下一步是什么

浏览:1次 日期:2024年10月21日 21:16:30 作者:admin

2022 年 5 月,我们分享了Angular 对未来的愿景,我们致力于投资服务器端渲染和水合作用。 Angular 通过 Angular Universal 支持服务器端渲染,Angular Universal 最初是由第三方贡献者创建的。最终 Angular Universal 成为 Angular 的官方 SSR 库。

快进到 2023 年,SSR 现在已经成为现代 Web 应用程序的重要组成部分,并且已经存在了几年了。我们进行了调查,社区让我们知道服务器端渲染是 Angular 用户希望改进的领域。根据您的反馈以及 SSR 周围环境的变化,我们将服务器端渲染作为 2023 年的首要任务

全面应用Hydration(水合)支持

自 2016 年以来,Angular GitHub 存储库上出现了多个与水合作用相关的问题(例如 # 13446和 # 23427 )。最突出的问题之一是页面渲染时间和页面准备好交互之间发生的闪烁由用户。这种闪烁是由于 Angular 在客户端重新引导后破坏并重新绘制了 DOM 结构。人们使用了不同的方法来减少闪烁,使其不那么明显。然而,它在LighthouseWebPageTest等工具中仍然可见,并且还会影响累积布局偏移(CLS) 等统计数据。

为了解决这些问题,我们一直致力于为 Angular 实施更好的水合解决方案。我们很高兴地宣布,随着即将发布的 v16 版本,Angular 将提供完整的应用程序无损水合作用。 Angular 可以重用客户端上由服务器渲染的现有 DOM 结构,而无需销毁并重新渲染所有结构。我们还对 HttpClient 进行了一些更新。现在,它将缓存在服务器上发出的请求,以避免在客户端上再次重新获取相同的数据。

这些令人兴奋的更新只是水合作用和服务器端渲染的开始。如果您有兴趣深入了解水合的工作原理,请继续关注未来的博客文章,我们将在其中介绍更多详细信息。与此同时,这种新的非破坏性水合解决方案在当前的 Angular v16 候选版本中作为开发者预览版提供。请尝试一下并告诉我们您的想法。

即将发生什么

所有这些工作都是我们路线图的一部分,而且还有更多工作要做。服务器端渲染很快将成为 Angular CLI 的原生部分。我们计划将 Angular Universal 的所有包移至框架和工具中,以确保 SSR 和 Angular 的最佳、最流畅的入门体验。我们计划继续与 Aurora 团队合作,以改善服务器端渲染的整体体验。我们正在积极研究或探索许多功能,例如延迟加载的延迟加载组件的本机选项。我们还在探索如何利用 Angular 的信号来提供更细粒度的水合作用。

我们非常偏爱所有这些更改,并且我们当然计划恢复Angular 在服务器端渲染方面的发展方向,并且 v17 及更高版本还有更多内容。敬请关注。

Angular 团队的 Andrew Kushnir 是这篇博文的共同作者。

原文链接:https://blog.angular.dev/whats-next-for-server-side-rendering-in-angular-2a6f27662b67