javascript - Angular ssr，页面重新渲染问题

Question

我是 Angular ssr 的新手，您可以看到下面的代码

问题

如果我直接进入客户端路由，首先会显示

Rendered by server

但很快它就会重新渲染页面并显示:

Rendered by browser

我想我知道为什么会发生这种情况，但是可以肯定有人可以提供一个很好的解释吗？另外，我可以以某种方式避免这种行为并强制浏览器渲染来自服务器的 html 吗？我应该担心这个吗？

client.component.ts

@Component({
  selector: "client",
  template: "<p>Rendered by {{ renderer }}</p>",
  styleUrls: ["./dumco.component.css"]
})
export class ClientComponent implements OnInit {

  renderer: string;
  bla: any = [];

  constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: any) {
    this.renderer = isPlatformBrowser(platformId) ? "Browser" : "Server";
  }
}

app-routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, PreloadAllModules } from "@angular/router";
import { AppComponent } from "./app.component";
import { CompfComponent } from "./compf/compf.component"
import { HomeComponent } from "./home/home.component"

export const appRoutes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "comp",
    component: CompfComponent
  },
  {
    path: "client",
    loadChildren: () => import("./client/client.module").then(m => m.ClientModule),
    data: { title: "Static Data - Clients" }
  },
];

// preloadingStrategy: PreloadAllModules,
@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { onSameUrlNavigation: "reload", initialNavigation: 'enabled' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";

import { AppRoutingModule } from "./app-routing.module"

import { AppComponent } from './app.component';
import { CompfComponent } from './compf/compf.component';
import { HomeComponent } from './home/home.component';

import { TransferHttpCacheModule } from "@nguniversal/common"

@NgModule({
  declarations: [
    AppComponent,
    CompfComponent,
    HomeComponent
  ],
  imports: [
    HttpClientModule,
    TransferHttpCacheModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Answer 1

这是 Angular 通用的正常行为。这是正常流程:

1. 您向服务器发出请求
2. Angular Universal 在服务器端创建并渲染组件(包括 API 调用)以生成 HTML 内容。内容被发送回客户端浏览器。 (在您的示例中，HTML 将包含“由服务器呈现”)
3. 浏览器呈现 HTML。
4. 渲染页面并加载 dom 文档后，客户端 Angular 应用程序就会启动。
5. 客户端 Angular 应用程序创建并渲染组件(并进行 API 调用)。在您的情况下，它将呈现“由浏览器呈现”。

您实际上不必担心这一点。在实际情况中，您会让组件进行 API 调用。为了防止客户端进行与服务器端已进行的相同调用，您可以使用 Angular TransferState 在 HTML 生成的服务器端中序列化 API 数据，以便客户端可以使用该数据立即执行，而不是再次进行 API 调用。

这样，客户端生成的 HTML 应该与服务器生成的 HTML 相同。 (当然，除非您专门显示不同的数据服务器和客户端，就像在您的示例中一样)