Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系

举报
汪子熙 发表于 2023/12/01 20:10:32 2023/12/01
【摘要】 在 Angular 启用服务器端渲染(Server-Side Rendering,SSR)后,当浏览器端访问这个 Angular 应用时,会涉及到一系列过程,包括初始化、数据获取、hydration(重新注水)和与 NgRx Store 之间的交互。下面我将详细介绍这些步骤:初始化应用:用户在浏览器中输入应用的URL。服务器端处理请求,生成一个包含Angular应用的HTML页面。服务器端将...

在 Angular 启用服务器端渲染(Server-Side Rendering,SSR)后,当浏览器端访问这个 Angular 应用时,会涉及到一系列过程,包括初始化、数据获取、hydration(重新注水)和与 NgRx Store 之间的交互。下面我将详细介绍这些步骤:

  1. 初始化应用

    • 用户在浏览器中输入应用的URL。
    • 服务器端处理请求,生成一个包含Angular应用的HTML页面。
    • 服务器端将预渲染的Angular组件及其初始状态嵌入HTML页面。
  2. 初始渲染(Server-Side Rendering)

    • 浏览器接收到HTML页面,开始解析和渲染。
    • Angular应用的初始状态和模板通过HTML的内联脚本加载到浏览器中。
    • 浏览器开始呈现应用,这意味着用户能够看到页面内容,但此时还没有进行完全的客户端渲染。
  3. 数据获取

    • 一旦初始渲染完成,Angular应用可能需要从服务器或其他数据源获取更多数据。这可以通过HTTP请求或WebSocket等方式进行。
    • 这些数据用于更新应用的状态,以便呈现完整的页面内容。
  4. Hydration(重新注水)

    • 在客户端初始渲染之后,Angular应用需要"重新注水",也就是将客户端的DOM与服务器端渲染的HTML进行关联。
    • Angular会识别已经渲染的DOM,并与其匹配已经渲染的组件和状态。
    • 这个过程确保客户端渲染不会从头开始构建DOM,而是尽可能复用服务器端渲染的DOM。
    • 这减少了加载时间和提高了性能。
  5. NgRx Store 的交互

    • NgRx是一个状态管理库,通常用于管理Angular应用的状态。
    • 在SSR中,客户端和服务器端之间需要协调数据的状态。服务器端渲染会初始化应用状态,并在注水时传递给客户端。
    • 在客户端,NgRx Store会恢复这些状态并确保客户端的状态与服务器端保持同步。
    • 当客户端应用需要更多数据时,可以发起Action,这将触发HTTP请求或其他数据获取操作,然后将数据更新到Store中。
    • 组件可以选择订阅Store中的状态,以获取数据并反映在界面上,同时也可以分发Actions来改变状态。

总之,通过服务器端渲染和hydration,Angular应用在浏览器中的初始化速度更快,用户可以更快地看到内容。NgRx Store则用于管理状态,确保服务器端和客户端之间的状态同步。这种方式有助于提高性能和搜索引擎优化,同时提供更好的用户体验。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。