什么是 Angular 应用的 re-hydration 过程

简介: 什么是 Angular 应用的 re-hydration 过程

在讨论 Angular 的服务器端渲染(Server-Side Rendering,简称 SSR)以及重水合(Re-hydration)的过程之前,我们首先需要理解一些基本概念。


Angular 是一个流行的前端 JavaScript 框架,能够用于开发单页应用(SPA)。SPA 在浏览器中加载一次,之后所有的用户交互都通过 JavaScript 来处理,这样能提供流畅的用户体验。然而,这种方法的一个问题是,因为整个应用都需要在客户端加载和执行,所以首屏加载可能会比较慢。而且,由于内容是通过 JavaScript 动态生成的,搜索引擎可能无法正确地索引这些内容。


为了解决这些问题,Angular 提供了一个叫做 Angular Universal 的解决方案。Angular Universal 通过在服务器端运行 Angular 应用,生成静态的 HTML 页面,然后将这个静态的 HTML 发送到客户端。这样,用户可以立即看到页面的内容,同时搜索引擎也能正确地索引这些内容。


那么,当我们启用 Angular 的 SSR 之后,用户在浏览器端访问 Angular 应用时,背后到底发生了什么呢?


首先,当用户请求一个页面时,请求会被发送到服务器。服务器上运行的 Angular 应用会处理这个请求,执行相关的路由,获取必要的数据,并生成一个完整的 HTML 页面。这个页面包含了所有的静态内容,以及一些额外的信息,比如状态数据和其他配置信息。然后,服务器将这个 HTML 页面以及其他相关的文件(比如 CSS、JavaScript 文件等)发送到客户端。


然后,客户端收到这个 HTML 页面和其他文件后,浏览器会立即开始渲染页面。因为页面已经是完整的 HTML,用户可以立即看到页面的内容,而不需要等待 JavaScript 加载和执行。这就是所谓的 " 首屏优化 "。


然后,浏览器开始加载和执行 JavaScript。在这个过程中,Angular 会启动并开始 " 重水合 " 的过程。重水合是一个特殊的步骤,用于将服务器生成的静态 HTML " 转变 " 为一个完全交互的 SPA。重水合的过程包括以下几个步骤:


  1. Angular 会解析 HTML,创建一个新的 Angular 应用实例。这个新的应用实例会与 HTML 页面中的元素进行关联,创建一个完整的组件树。
  2. 然后,Angular 会加载和初始化服务(Services)、路由(Routes)、模块(Modules)等。这个过程中,Angular 会利用 HTML 中的状态数据和其他配置信息,来正确地初始化应用的状态。
  3. 之后,Angular 会开始 " 激活 " 组件。激活的过程中,Angular 会执行组件的生命周期钩子函数,比如 ngOnInit、ngAfterViewInit 等。
相关文章
|
27天前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
24 2
|
1月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
16 0
|
1月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
23 1
|
23天前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
1月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
38 0
|
1月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
46 0
|
1月前
|
网络协议 JavaScript
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
19 0
|
1月前
|
缓存 JavaScript 中间件
如何在 Angular 应用中发起 HTTP 302 redirect
如何在 Angular 应用中发起 HTTP 302 redirect
21 0
|
1月前
|
Web App开发 前端开发 API
Skeleton Design 理念在 Angular 应用开发中的具体应用一例
Skeleton Design 理念在 Angular 应用开发中的具体应用一例
21 1
|
2月前
|
缓存 JavaScript 前端开发
关于 Angular PWA 应用中的 ngsw.json 文件
关于 Angular PWA 应用中的 ngsw.json 文件
23 1