Angular 15 SSR中TransferHttpCacheModule不支持POST请求，求替代方案

推荐替代库与实现方式 #

1. ngx-transfer-state #

这是社区维护的Angular Universal状态转移工具，原生支持POST等非GET请求的缓存同步。

• 安装命令：npm install ngx-transfer-state --save
• 配置模块：在app.server.module.ts中导入ServerTransferStateModule，app.module.ts中导入BrowserTransferStateModule
• 封装HTTP服务示例：

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
import { tap, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SearchService {
  constructor(
    private http: HttpClient,
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  getSearchResults(searchParams: any) {
    // 基于请求体生成唯一状态键，避免不同请求缓存冲突
    const stateKey = makeStateKey<string>(`search-post-${btoa(JSON.stringify(searchParams))}`);
    
    if (isPlatformServer(this.platformId)) {
      return this.http.post('/api/search', searchParams).pipe(
        tap(response => this.transferState.set(stateKey, response))
      );
    } else {
      const cachedResponse = this.transferState.get(stateKey, null);
      if (cachedResponse) {
        this.transferState.remove(stateKey); // 移除缓存避免重复使用
        return of(cachedResponse);
      }
      return this.http.post('/api/search', searchParams);
    }
  }
}

2. 手动基于Angular TransferState实现 #

无需第三方库，直接利用Angular原生的TransferState自定义处理：

• 核心逻辑和上面一致：服务端发起POST请求后将响应存入TransferState，浏览器端优先读取缓存，缓存不存在时再发起请求
• 关键是要为每个POST请求生成唯一的状态标识（比如对请求体进行哈希或Base64编码），防止不同请求的缓存互相覆盖

关于启用JS后结果消失的原因 #

TransferHttpCacheModule仅处理GET请求，SSR阶段服务端发起POST请求并渲染了页面内容，但浏览器端初始化后，Angular会重新执行组件逻辑并发起POST请求（若组件在初始化钩子中调用接口）。此时因为没有缓存机制，要么请求尚未完成导致页面暂时空白，要么请求环境/参数差异导致返回结果不同，最终表现为原SSR渲染的内容消失。

内容的提问来源于stack exchange，提问作者Andrew Howard