如何删除 Angular SSR 应用 State Transfer 嵌入到 HTML 里的某些字段

笔者这篇文章介绍了 Angular SSR 应用 State Transfer 的工作机制和错误排查方法。

SSR 服务器端发送给客户端 response 里包含的 State Transfer 数据的一个例子如下：

<script id="serverApp-state" type="application/json">
...
&q;headers&q;:{&q;date&q;:[&q;Fri, 05 Mar 2021 12:44:26 GMT&q;],&q;content-type&q;:[&q;application/json; charset=utf-8&q;],&q;content-length&q;:[&q;2933&q;],&q;connection&q;:[&q;keep-alive&q;],&q;server&q;:[&q;nginx/1.18.0&q;],&q;vary&q;:[&q;origin,accept-encoding&q;],&q;cache-control&q;:[&q;no-cache&q;],&q;accept-ranges&q;:[&q;bytes&q;]}
...
</script>

如果我们的需求是在这个 response 里删除部分字段，可以参考这篇文章的做法。

TransferHttpCacheModule 是 Angular Universal 的一部分，它在服务器端渲染（SSR）环境中非常有用。这个模块的主要目的是优化页面的加载时间，特别是在首次加载页面时。

在没有使用 TransferHttpCacheModule 的情况下，当应用在服务器端渲染后发送给客户端时，客户端会再次执行相同的 HTTP 请求以获取数据。这意味着同一份数据会被请求两次，一次在服务器端，一次在客户端。这将导致不必要的网络请求，从而影响页面的加载时间和用户体验。

这就是 TransferHttpCacheModule 的作用之处。通过使用这个模块，当应用在服务器端渲染时执行的 HTTP 请求的响应数据将被缓存，并随着渲染后的页面一起发送给客户端。然后，客户端应用在执行相同的 HTTP 请求时，会先检查是否有缓存的响应数据，如果有，它将直接使用这些数据，而不是向服务器发送另一个请求。

这样做的好处是显而易见的：减少了不必要的网络请求，加快了页面的加载速度，改善了用户体验。

下面是一个简单的示例来说明如何使用 TransferHttpCacheModule：

首先，你需要在服务器端的 AppModule 中导入 TransferHttpCacheModule。这通常在 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';
import { TransferHttpCacheModule } from '@nguniversal/common';

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

在这个例子中，我们同时导入了 ServerModule 和 ServerTransferStateModule，这些都是在服务器端渲染应用时需要的模块。我们也导入了 TransferHttpCacheModule，这是我们用来缓存 HTTP 请求响应的模块。

然后，在你的服务中，你可以像平常一样进行 HTTP 请求：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://example.com/api/data');
  }
}

在这个服务中，我们使用 HttpClient 来获取数据。当这个服务在服务器端运行时，由于我们已经在服务器端的 AppModule 中导入了 TransferHttpCacheModule，所以这个请求的响应数据将被自动缓存。