Angular SSR+Hydration生产/预发环境CDN部署异常排查

1. 先确认Hydration是否真的执行 #

生产环境默认没有Hydration日志，手动添加检测逻辑验证：
在根组件（如app.component.ts）中加入以下代码，通过控制台或监控确认Hydration状态：

import { Component, OnInit } from '@angular/core';
import { HydrationManager } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private hydrationManager: HydrationManager) {}

  ngOnInit() {
    if (this.hydrationManager.wasHydrated) {
      console.log('[Hydration] 页面已完成服务端内容复用');
    } else {
      console.log('[Hydration] 未执行Hydration，页面从头渲染');
    }
  }
}

如果输出“未执行Hydration”，说明问题根源是Hydration未触发，而非TransferState缓存失效。

2. 检查CDN是否破坏Hydration依赖 #

虽然页面源码看起来一致，但CDN的压缩/篡改可能移除Angular Hydration必需的内容：

• 打开浏览器开发者工具，查看页面根节点是否存在ng-server-context属性（SSR生成的标识）
• 检查全局变量__NG_TRANSFER_STATE__是否存在（TransferState存储的服务端数据），若不存在说明服务端生成的TransferState被CDN清除

3. 验证TransferCache过滤条件是否生效 #

当前配置通过skip-hydration-caching请求头过滤缓存，需确认生产环境请求是否符合规则：
添加HTTP拦截器打印请求头信息：

import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class CacheDebugInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    console.log('[Cache] 请求头skip-hydration-caching:', req.headers.get('skip-hydration-caching'));
    return next.handle(req);
  }
}

在app.config.ts中注册拦截器：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: CacheDebugInterceptor, multi: true },
  // 其他现有配置
]

若请求头中意外出现skip-hydration-caching: true，会导致请求不被缓存。

4. 排查构建与环境配置差异 #

对比本地与生产构建的angular.json配置：

• 检查生产构建是否开启了optimization、buildOptimizer，部分极端优化可能破坏Hydration逻辑，可临时关闭优化验证问题是否消失
• 确认服务端server.ts中是否正确引入provideServerRendering()，客户端provideClientHydration配置无遗漏

5. 检查CDN缓存策略 #

CDN缓存规则可能导致SSR HTML与客户端JS资源版本不匹配，触发重新渲染：

• 确保SSR生成的动态HTML未被CDN缓存（或设置合理的缓存过期时间）
• 静态资源（JS/CSS）需带上哈希后缀，避免CDN返回旧版本资源导致Hydration失败

内容的提问来源于stack exchange，提问作者Pravesh Shetty