Angular 服务器端渲染应用 re-hydration 过程详解

简介: Angular 服务器端渲染应用 re-hydration 过程详解

当使用Angular启用服务器端渲染(Server-Side Rendering,以下简称SSR)时,应用程序的工作方式发生了显著变化。这使得Angular应用更加友好,不仅对搜索引擎爬虫更友好,还有助于改善应用的性能和加载时间。在本文中,我们将详细介绍在浏览器端访问启用SSR的Angular应用时背后发生的事情,特别侧重于"re-hydration"的过程。


什么是Angular的服务器端渲染(SSR)?

服务器端渲染是一种Web应用程序的渲染技术,它允许在服务器上预渲染应用的HTML,然后将其发送到浏览器。与传统的客户端渲染(Client-Side Rendering,CSR)相比,SSR具有许多优势,包括更好的搜索引擎优化(SEO)、更快的初始加载时间以及更好的性能。


在Angular中,SSR的主要目标是将Angular应用的渲染工作从浏览器转移到服务器,以便将初始HTML内容发送给浏览器,从而加速页面的首次加载。当用户访问启用SSR的Angular应用时,以下过程将发生:


1. 服务器端渲染

1.1 服务器端渲染开始于用户发出HTTP请求到Angular应用的服务器。

1.2 服务器收到请求后,创建一个Angular应用实例,执行应用的路由和组件渲染,并将初始HTML生成并发送到浏览器。这个HTML包含了初始页面状态,而不是一个空白的HTML模板。

1.3 在这个阶段,Angular应用在服务器上运行,而不是在浏览器中。


2. 初次加载

2.1 浏览器接收到服务器发送的预渲染的HTML响应。

2.2 浏览器开始解析HTML,并构建DOM树。

2.3 JavaScript文件和其他资源(CSS、图片等)开始下载。

2.4 与此同时,浏览器解析HTML中的JavaScript引导代码,这些代码初始化Angular应用。


3. Rehydration(重新水合)

re-hydration是SSR的一个关键概念,指的是在浏览器中重新激活(hydrate)已经在服务器上渲染的Angular应用。这一过程发生在初次加载时,它确保应用在浏览器中继续运行并具有互动性。


以下是re-hydration的详细过程:


3.1 JavaScript初始化:当浏览器解析到预渲染的HTML中的JavaScript引导代码时,Angular应用开始在浏览器中初始化。

3.2 应用状态:Angular应用不是从头开始构建,而是通过将服务器端渲染的HTML作为初始状态来继续构建。这包括应用的路由、组件状态和任何其他应用状态。

3.3 组件继续渲染:Angular应用会检测到浏览器已经渲染的部分,然后继续渲染其余部分。这包括组件模板中的任何延迟加载的内容。

3.4 事件绑定:事件监听器会重新附加到DOM元素上,以确保应用的互动性。这意味着用户可以与应用进行交互,如点击按钮或填写表单。

3.5 异步数据:如果应用需要通过HTTP请求获取数据,它会在浏览器端重新执行这些请求,并将响应数据插入到DOM中。

3.6 完成re-hydration:一旦应用的初始状态和交互性都恢复到浏览器端,re-hydration过程就完成了。此时,用户可以与应用进行交互,而且应用会继续在浏览器中运行。


4. 后续页面导航

一旦Angular应用在浏览器中进行了re-hydration,后续的页面导航将与传统的SPA应用相似,只是在每个页面导航之后,Angular应用会根据路由和组件的需求加载和渲染新内容。


re-hydration的重要性

re-hydration是SSR的核心概念之一,它确保了在服务器端渲染后,应用可以在浏览器中恢复并继续运行。这对于提供更快的初始加载时间和更好的用户体验至关重要。以下是一些re-hydration的重要性:


  1. 更快的初始加载时间: 由于初始HTML内容是由服务器渲染的,用户可以更快地看到页面内容。这比传统的CSR方法更快,因为在CSR中,用户需要等待浏览器下载JavaScript和渲染页面后才能看到内容。
  2. 搜索引擎优化(SEO): 搜索引擎爬虫可以轻松地获取服务器渲染的HTML内容,这有助于提高应用的SEO。在CSR中,搜索引擎可能无法有效地索引页面内容。
  3. 提高可访问性: re-hydration确保应用状态的恢复,包括焦点状态、表单字段等。这对于具有较高可访问性要求的应用非常重要。
  4. 更好的性能: re-hydration可以减轻浏览器的负担,因为大部分渲染工作已经在服务器上完成。这可以提高应用的性能和响应时间。


示例:re-hydration过程

为了更好地理解re-hydration的过程,让我们通过一个具体的示例来演示。假设我们有一个Angular应用,它是一个简单的博客网站,用户可以查看博客文章和发表评论。这个应用已经启用了SSR。


步骤1:服务器端渲染

当用户访问博客网站时,他们的浏览器发出HTTP请求到应用的服务器。服务器接收到请求后,开始服务器端渲染:


  • 服务器创建一个Angular应用实例。
  • 应用检测到路由,例如/blog/123,并渲染相关博客文章和评论的组件。
  • 应用生成初始的HTML,包括文章内容和评论,以及JavaScript引导代码。
  • 服务器将HTML响应发送回浏览器。


步骤2:初次加载

浏览器接收到服务器的响应,然后开始初次加载过程:


  • 浏览器解析HTML并构建DOM树。
  • JavaScript文件和其他资源(例如CSS和图片)开始下载。
  • 浏览器执行HTML中的JavaScript引导代码,这初始化了Angular应用。


步骤3:re-hydration

re-hydration是rehydration的过程,确保应用在浏览器中继续运行:


  • JavaScript初始化:浏览器执行预渲染HTML中的JavaScript引导代码,初始化Angular应用。
  • 应用状态:Angular应用开始在浏览器中构建,但它不是从头开始构建。相反,它继续使用服务器端渲染的HTML作为初始状态。这包括在博客文章组件中显示的文章内容和评论。
  • 组件继续渲染:Angular应用检测到浏览器已经渲染的部分,然后继续渲染其余部分。这可能包括加载评论的组件,以及可能是延迟加载的其他内容。
  • 事件绑定:事件监听器重新附加到DOM元素上,以确保应用的互动性。例如,如果用户可以点击“提交评论”按钮,这个按钮的点击事件将再次绑定,以确保评论功能正常工作。
  • 异步数据:如果应用需要通过HTTP请求获取数据,例如新评论或其他博客文章,它会在浏览器端重新执行这些请求,并将响应数据插入到DOM中。
  • 完成re-hydration:一旦应用状态和交互性都在浏览器中重新建立,re-hydration过程就完成了。此时,用户可以与应用进行交互,并且应用会在浏览器中继续运行。


步骤4:后续页面导航

一旦re-hydration完成,用户可以浏览博客网站的不同部分。在每次页面导航时,Angular应用将根据路由和组件的需求加载和渲染新内容,而不需要重新进行完整的re-hydration过程。


总结

Angular的服务器端渲染(SSR)是一种强大的技术,可以显著改善Web应用程序的性能、可访问性和搜索引擎优化。re-hydration是SSR的核心概念之一,它确保应用在浏览器中继续运行,并具有互动性。这个过程非常重要,因为它帮助提供更快的初始加载时间和更好的用户体验。通过将渲染工作从浏览器转移到服务器,Angular SSR可以在多个方面带来显著的好处,让用户更快地访问您的应用,并帮助提高您的应用在搜索引擎中的可见性。

相关文章
|
4天前
|
弹性计算 网络安全 数据安全/隐私保护
ECS热门应用 | 解决Guestosssh异常
通过ECS实例快速发现操作系统内部的问题,并给出对应的修复方案。
|
5天前
|
弹性计算 安全 网络安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(1)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(1)
150 0
|
5天前
|
弹性计算 安全 网络安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(2)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(2)
181 0
|
5天前
|
弹性计算 人工智能 安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(3)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(3)
190 0
|
5天前
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(1)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(1)
184 1
|
5天前
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
286 1
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
|
5天前
|
弹性计算 运维 监控
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(3)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(3)
173 1
|
5天前
|
弹性计算 安全 API
带你读《从基础到应用云上安全航行指南》——干货长文快收藏!阿里云专家教你如何安全访问和管理ECS资源(1)
带你读《从基础到应用云上安全航行指南》——干货长文快收藏!阿里云专家教你如何安全访问和管理ECS资源(1)
183 2
|
5天前
|
弹性计算 运维 监控
带你读《从基础到应用云上安全航行指南》——干货长文快收藏!阿里云专家教你如何安全访问和管理ECS资源(2)
带你读《从基础到应用云上安全航行指南》——干货长文快收藏!阿里云专家教你如何安全访问和管理ECS资源(2)
170 0
|
5天前
|
弹性计算 安全 开发工具
带你读《从基础到应用云上安全航行指南》——干货长文快收藏!阿里云专家教你如何安全访问和管理ECS资源(3)
带你读《从基础到应用云上安全航行指南》——干货长文快收藏!阿里云专家教你如何安全访问和管理ECS资源(3)
165 2

相关产品

  • 云迁移中心