Angular 中具有 (RE)Hydration 的 SSR

Question

Angular Universal 用于服务器端渲染。

我有一个功能齐全的 Angular 应用程序。增加FCP。我需要通过服务器端渲染来补充水分。

Angular 是否通用允许动态 SSR。在服务器端加载某些组件？

我找不到任何与此相关的内容。（是的，我做了一些谷歌搜索）。

我在这里找到了类似的主题，但我需要了解更多。

Angular 和 Angular Universal 之间的决策边界。

在这里找到了一些相关的文章。

它是否将数据绕过到后端，或者它不关心数据，只渲染静态数据？

角度通用中是否可能出现以下情况

如果我在一个页面上有三个组件

<Comp1></Comp1>
<Comp2><Comp2>
<Comp3><Comp3>

Comp1 和 Comp3 大部分是静态的。Comp2 是用户特定的。我不希望 comp2 在服务器端呈现。Comp1 和 Comp3 来自服务器渲染，Comp2 来自客户端。

Answer 1

Angular Universal 的工作方式是组件在服务器端渲染，然后，一旦加载页面，客户端 Angular 应用程序就会接管并重新渲染组件。

如果不使用状态传输，当客户端从 API 请求数据时，有时可能会出现一些闪烁。

如果您想要的只是不渲染Comp2服务器端，那么您可以简单地根据平台（浏览器/服务器）添加一些条件

模板.html

<Comp1></Comp1>
<Comp2 *ngIf=isBrowser></Comp2>

组件.html

import {Injectable, Inject, PLATFORM_ID, Optional} from '@angular/core';
import {isPlatformBrowser} from "@angular/common";

isBrowser: boolean = false;

constructor(@Inject(PLATFORM_ID) private platformId: Object)
{
    this.isBrowser = isPlatformBrowser(this.platformId);
}

但请注意，Comp1无论如何都会在客户端再次呈现