angular - SSR with (RE)Hydration in Angular

Question

Angular Universal 用于服务器端渲染。

我有一个功能齐全的 Angular 应用程序。增加FCP。我需要与服务器端渲染相结合。

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

我找不到与此相关的任何内容。(是的，我对它进行了一些谷歌搜索)。

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

The dicision boundary between Angular & Angular Universal .

找到一些相关的文章here .

它是将数据绕过后端还是不关心数据，只呈现静态数据？

在 Angular 通用中是否可能出现以下情况

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

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

Comp1 和 Comp3 大多是静态的。Comp2 是用户特定的。我不想在服务器端呈现 comp2。服务器渲染的 Comp1 和 Comp3 以及客户端的 Comp2。

Answer 1

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

如果您不使用 State Transfer，客户端从 API 请求数据时有时会出现一些闪烁。

如果你不想在服务器端渲染Comp2，那么你可以简单地添加一些基于平台(浏览器/服务器)的条件

template.html

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

component.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 无论如何都会在客户端再次呈现