Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程

简介: Angular 服务器端渲染的静态 HTML 变为客户端的动态应用的过程

首先,让我们先了解一下 Angular 服务器端渲染 (SSR) 的工作原理。


当你的 Angular 应用启用服务器端渲染后,用户在浏览器中请求页面时,服务器会预先渲染出 HTML,并且将其发送到客户端这样做的优点是可以改善首屏加载时间,提升 SEO 效果,因为搜索引擎可以抓取到预渲染的 HTML 内容。


那么,从浏览器端请求 Angular SSR 应用到页面完全交互可用,背后发生了什么呢?


  1. 用户在浏览器中请求一个页面,服务器会接收到这个请求。
  2. 服务器会运行 Angular 应用,生成应用的首屏 HTML 内容。在这个过程中,Angular 应用可能会进行 API 调用,获取一些初始化数据。
  3. 如果你的应用使用了 NgRx,那么在服务器端渲染阶段,你的应用状态会被初始化,并且可能会在处理用户请求时改变。服务器会将这个最终的状态序列化,一起发送到客户端。
  4. 服务器将生成的 HTML,以及序列化后的状态,发送到客户端。
  5. 客户端接收到服务器返回的 HTML 和状态。HTML 会立即显示在浏览器中,用户可以看到页面的内容。但是此时的页面还不是完全交互可用的,因为 Angular 还没有启动。
  6. 客户端会加载和启动 Angular。这个过程称为 “hydration” 或 “rehydration”。在这个过程中,Angular 会使用服务器发送过来的状态来初始化 NgRx Store。这样,客户端的状态就和服务器端的状态保持一致了。
  7. 当 Angular 启动完成后,页面就变成了完全交互可用的。此时,任何用户的操作都会通过 NgRx Store 来改变应用的状态。


总的来说,rehydration 是一个过程,它将服务器端渲染的静态 HTML 变为客户端的动态应用。在这个过程中,NgRx Store 会使用服务器发送过来的状态来初始化,以确保客户端和服务器端的状态一致。

相关文章
|
7天前
|
消息中间件 运维 网络协议
客户端和服务器之间的通信
客户端和服务器之间的通信
13 0
|
11天前
|
监控 关系型数据库 Linux
|
11天前
|
弹性计算 网络安全 数据安全/隐私保护
ECS热门应用 | 解决Guestosssh异常
通过ECS实例快速发现操作系统内部的问题,并给出对应的修复方案。
129118 5
|
12天前
|
弹性计算 人工智能 安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(3)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(3)
332 0
|
12天前
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(1)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(1)
325 1
|
12天前
|
弹性计算 安全 网络安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(2)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(2)
343 0
|
12天前
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
605 1
带你读《从基础到应用云上安全航行指南》——九大提升ECS实例操作系统安全性的技巧(2)
|
10天前
|
网络协议 Java API
【JavaEE初阶】 TCP服务器与客户端的搭建
【JavaEE初阶】 TCP服务器与客户端的搭建
|
10天前
|
自然语言处理 Java 编译器
【JavaEE初阶】 UDP服务器与客户端的搭建
【JavaEE初阶】 UDP服务器与客户端的搭建
|
12天前
|
弹性计算 安全 网络安全
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(1)
带你读《从基础到应用云上安全航行指南》——阿里云产品专家教你如何全方位构建ECS安全体系(1)
297 0

热门文章

最新文章

相关产品