在讨论 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。重水合的过程包括以下几个步骤:
-
Angular 会解析 HTML,创建一个新的 Angular 应用实例。这个新的应用实例会与 HTML 页面中的元素进行关联,创建一个完整的组件树。
-
然后,Angular 会加载和初始化服务(Services)、路由(Routes)、模块(Modules)等。这个过程中,Angular 会利用 HTML 中的状态数据和其他配置信息,来正确地初始化应用的状态。
-
之后,Angular 会开始 " 激活 " 组件。激活的过程中,Angular 会执行组件的生命周期钩子函数,比如
ngOnInit
、ngAfterViewInit
等。