笔者这篇文章介绍了 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，所以这个请求的响应数据将被自动缓存。
