Angular 16.2.0 SSR项目启用Hydration后API仍两端重复调用求助

• 验证TransferState是否正确缓存服务端请求数据
  Angular的hydration不会自动复用服务端请求结果，必须通过TransferState手动传递数据。确保：

  1. 服务端模块导入ServerTransferStateModule，客户端模块导入BrowserTransferStateModule
  2. 请求逻辑中优先从TransferState读取缓存，无缓存时才发起请求：

     import { TransferState, makeStateKey } from '@angular/platform-browser';
     import { isPlatformServer } from '@angular/common';
     import { PLATFORM_ID } from '@angular/core';
     
     const API_DATA_KEY = makeStateKey<any>('api-data');
     
     constructor(
       private transferState: TransferState,
       private apiService: ApiService,
       @Inject(PLATFORM_ID) private platformId: Object
     ) {}
     
     ngOnInit() {
       const cachedData = this.transferState.get(API_DATA_KEY, null);
       if (cachedData) {
         this.processData(cachedData);
       } else {
         this.apiService.fetchData().subscribe(data => {
           this.processData(data);
           // 仅在服务端存入TransferState，避免客户端重复写入
           if (isPlatformServer(this.platformId)) {
             this.transferState.set(API_DATA_KEY, data);
           }
         });
       }
     }
     

• 检查provideClientHydration配置完整性
  确认provideClientHydration()已正确添加到应用配置的providers数组中，未被错误配置覆盖：

  // app.config.ts
  import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
  import { provideClientHydration } from '@angular/platform-browser';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideZoneChangeDetection({ eventCoalescing: true }),
      provideClientHydration(), // 确保该配置存在且未被修改
      // 其他服务配置
    ]
  };
  

  注意不要添加withNoHydration()等禁用hydration的选项。

• 排查Hydration不匹配问题
  控制台显示hydration完成不代表所有组件都匹配，隐藏的不匹配会触发组件重新渲染：

  1. 开启Angular调试工具检查变更：

     ng.enableDebugTools(document.querySelector('app-root')).checkNoChanges();
     

  2. 查看浏览器控制台是否有Hydration Mismatch相关警告，比如DOM结构、属性、文本内容不一致，这些都会导致组件重新初始化，触发重复请求。

• 检查请求触发时机与组件生命周期
  避免在constructor或ngOnInit中直接发起请求（这些钩子在hydration阶段客户端仍会执行），可结合TransferState判断，或使用AfterContentInit等后期钩子，确保只在无缓存时请求。

• 验证第三方库/自定义指令的SSR兼容性
  部分第三方UI组件、自定义指令可能不支持hydration，导致客户端组件重新渲染：

  1. 临时移除第三方组件，测试是否仍存在重复请求
  2. 查看第三方库文档，确认是否需要额外配置支持Angular SSR/hydration

• 检查路由解析器/守卫的逻辑
  如果请求在路由解析器中触发：

  1. 确认解析器返回的数据已通过Angular SSR自动传递到客户端
  2. 避免解析器依赖客户端特有的API（如window、document），否则客户端会重新执行解析逻辑发起请求

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