Angular 17预渲染/SSR中HTML文件过大：如何避免内容重复？

DevOps 小满

2026-6-27

Angular SSR/SSG 缓存导致HTML内容重复的解决办法

1. 手动接管TransferState，禁用自动内嵌缓存JSON

放弃withHttpTransferCacheOptions的自动配置，手动管理数据缓存逻辑：

服务端渲染时，获取文章数据后存入TransferState，但仅在客户端初始化时读取该缓存，不将序列化的JSON内嵌到HTML中
实现步骤：
- 在服务端组件中，使用TransferState.set()存储数据
- 客户端组件初始化时，先通过TransferState.get()检查缓存，存在则直接复用，不存在再发起请求
- 移除自动的HTTP传输缓存拦截器，避免框架自动生成内嵌缓存

2. 精准配置withHttpTransferCacheOptions，过滤不必要的缓存

通过配置参数，排除那些内容已在HTML中渲染的请求（比如长篇文章接口），避免重复缓存：

providers: [
  provideHttpClient(withHttpTransferCacheOptions({
    // 仅缓存标记了特定请求头的接口
    includeHeaders: ['X-Need-Cache'],
    // 对长篇文章接口跳过缓存
    cacheKey: (req) => req.url.includes('long-form-article') ? null : req.url
  }))
]

这样长篇文章的内容只会在HTML中渲染一次，不会生成重复的缓存JSON。

3. 启用流式SSR（Angular 16+）

Angular 16及以上版本的流式SSR优化了内容输出逻辑，能避免大体积缓存JSON堆积在HTML末尾，减少重复内容带来的体积膨胀：

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(
      withHttpTransferCacheOptions(),
      withStreamingServerRendering()
    )
  ]
};

注意：流式SSR需要你的部署服务器支持分块传输编码（Chunked Transfer Encoding）。