Angular ssr，页面重新渲染问题

Question

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

问题

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

由服务器渲染

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

由浏览器渲染

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

客户端组件.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";
  }
}

应用程序路由.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 { }

应用程序模块.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 {}

应用程序.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

这是角度通用的正常行为。这是正常流程：

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

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

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