首页 > 其他分享 >什么是 Angular 应用的 re-hydration 过程

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

时间:2023-11-13 19:45:13浏览次数:30  
标签:JavaScript hydration re HTML 应用 加载 Angular 页面

在讨论 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 会执行组件的生命周期钩子函数,比如 ngOnInitngAfterViewInit 等。

标签:JavaScript,hydration,re,HTML,应用,加载,Angular,页面
From: https://www.cnblogs.com/sap-jerry/p/17829963.html

相关文章

  • 使用.NET Core创建Windows服务
    使用.NETCore创建Windows服务1.创建一个新的WorkerService项目打开命令行工具(例如:PowerShell、CMD、或者终端),然后输入以下命令创建一个新的WorkerService项目:dotnet new worker -n MyWorkerService这个命令将会创建一个名为"MyWorkerService"的新项目。2.添加必要的NuGe......
  • [题解] CFgym101623F Factor-Free Tree
    Factor-FreeTree当一棵二叉树中的每个节点的权值都与它所有祖先的权值互质时,我们称它为factor-freetree。给你一棵按照中序遍历的顺序的权值序列\(a\),求这个序列是否对应这一棵factor-freetree。如果是就输出每个节点的父亲。\(n\le10^5,a_i\le10^7\)。考虑怎么......
  • SpringBoot+Redis整合
    SpringBoot+Redis整合一.操作Json1.1pom文件<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId><version>2.7.1......
  • Fast-Reid的一个小小创新,能够解决行人重识别
    竞赛简介多年来,技术已经彻底改变了我们的世界,改变了我们每天的生活,一切都可以通过轻松地点击实现连接和访问。oneAPI就是这样一个技术堆栈,它在构建许多创新解决方案方面具有巨大的潜力。通过这次比赛精心策划的问题,您既可以更多地了解和体验人工智能技术在特定领域的运用,包括在机......
  • JavaSE DataStructure
    JavaSEDataStructureListArrayListArrayListDemo1点击查看代码importjava.util.ArrayList;importjava.util.Collection;importjava.util.Iterator;classArrayListDemo1{publicstaticvoidmain(String[]args){Collection<String>list=newA......
  • VMware Workstation 17.5 Pro Unlocker & OEM BIOS for Windows
    VMwareWorkstation17.5ProUnlocker&OEMBIOSforWindows在Windows上运行macOSSonoma请访问原文链接:https://sysin.org/blog/vmware-workstation-17-unlocker/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org桌面HypervisorVMwareWorkstationProVMwar......
  • RLHF · PBRL | 发现部分 D4RL tasks 不适合做 offline reward learning 的 benchmark
    论文题目:BenchmarksandAlgorithmsforOfflinePreference-BasedRewardLearning,TMLR20230103发表。openreview:https://openreview.net/forum?id=TGuXXlbKsnpdf版本:https://arxiv.org/pdf/2301.01392.pdfhtml版本:https://ar5iv.labs.arxiv.org/html/2301.01392目......
  • IDEA中github的remote不见了怎么办?
    情况是:本来已经和github建立连接了,并且也上传了一些数据。然后我有在其他文件加拉了一下分支代码,结果该文件夹下的和remote的仓库记录消失了。 记录一下。......
  • Wireshark抓包基础教程
    Wireshark抓包基础教程[TOC]OSI七层模型OSI七层模型层级层含义常用协议1物理层第一层中有很多技术——从物理网络设备、布线到电缆如何连接到设备之间的一切。另外,如果我们不需要电缆,那么信号的类型和传输方式是什么(例如,无线宽带)包括:节点(设备)和网络硬件、设备接口......
  • 使用PageHelper.startPage时 net.sf.jsqlparser.parser.ParseException: Encountered
    使用PageHelper.startPage时net.sf.jsqlparser.parser.ParseException:Encountered解决方案对比代码:原来的写法:PageHelper.startPage(page,size,order);List<xxx>list=xxxMapperExt.selectxxx(id,type);修改之后:PageHelper.startPage(page,size);List<xxx>list=xxxM......