Angular SSR搭配NGRX时初始加载无异步HTML问题咨询

核心问题分析 #

你遇到的第一种路由守卫方案（基于NGRX）导致SSR初始DOC无内容，本质是守卫的异步流未在服务器端正确完成，或者NGRX数据加载流程在服务器端存在时序/执行问题，导致Angular Universal一直等待守卫完成，最终超时或无法渲染页面。

第一种方案的具体问题点 #

1. 时序逻辑缺陷
   你的getProductQueryResult中，先订阅store的select流，再在tap中dispatch动作。如果初始store无数据，dispatch触发的effects请求可能还未完成，select流会一直等待数据，但如果服务器端effects未正确执行，这个流永远不会发出值，守卫一直处于pending状态。Angular Universal会因等待不到守卫完成信号，停止渲染甚至不输出静态内容。

2. 服务器端NGRX Effects未正确初始化
   如果app.server.module.ts未导入EffectsModule.forRoot()启动effects，或者effects中的HTTP请求依赖客户端API（如window），会导致服务器端无法触发数据加载，store永远不会有数据，守卫的filter(data => !!data)条件永远不满足。

3. 错误处理不完整
   守卫的catchError仅返回of(false)，但如果effects请求出错，store中的queryResult可能处于错误状态，select流无法发出有效值，守卫仍会阻塞。

修复第一种方案的具体步骤 #

1. 调整守卫的数据流时序 #

修改getProductQueryResult，先检查store数据，无数据则先dispatch动作，再等待数据加载完成：

private getProductQueryResult(getPayload: any) {
  // 先获取当前store中的数据
  return this._store.select('FilterPage', 'Loaded', 'ProductPage', 'queryResult').pipe(
    take(1),
    switchMap(currentData => {
      if (currentData) {
        return of(currentData);
      }
      // 无数据时dispatch动作，然后等待数据加载完成
      this._store.dispatch(filterActions.initProduct(getPayload));
      return this._store.select('FilterPage', 'Loaded', 'ProductPage', 'queryResult').pipe(
        filter(data => !!data), // 等待数据非空
        take(1)
      );
    })
  );
}

2. 确保服务器端NGRX Effects正常运行 #

• 在app.server.module.ts中导入Effects模块：

  import { EffectsModule } from '@ngrx/effects';
  import { ProductEffects } from './effects/product.effects';
  
  @NgModule({
    imports: [
      // ...其他导入
      EffectsModule.forRoot([ProductEffects]) // 启动服务器端effects
    ]
  })
  export class AppServerModule {}
  

• 检查effects中的HTTP请求：确保使用Angular Universal提供的HttpClient，避免依赖客户端专属API（如window、localStorage）。

3. 延长服务器端渲染超时时间 #

在server.ts的renderModuleFactory中增加超时配置，避免因数据加载慢导致渲染终止：

const html = await renderModuleFactory(AppServerModuleNgFactory, {
  document: indexHtml,
  url: req.url,
  extraProviders: [provideModuleMap(LAZY_MODULE_MAP)],
  timeout: 10000 // 设为10秒，根据实际请求时长调整
});

4. 完善错误处理 #

在守卫中处理effects请求失败的场景，确保守卫能正常终止：

return this.getProductQueryResult(getPayload).pipe(
  switchMap(() => of(true)),
  catchError(() => {
    // 可在此处跳转错误页或返回false
    this.router.navigate(['/404']);
    return of(false);
  })
);

第二种方案的优化思路 #

第二种方案有效是因为直接在服务器端发起HTTP请求，Angular Universal会等待Promise完成后渲染页面，但存在重复请求问题。可通过在effects中判断已有数据来避免：

// 在ProductEffects中
initProduct$ = createEffect(() => 
  this.actions$.pipe(
    ofType(filterActions.initProduct),
    withLatestFrom(this._store.select('FilterPage', 'Loaded', 'ProductPage', 'queryResult')),
    filter(([_, existingData]) => !existingData), // 已有数据则跳过请求
    switchMap(([action]) => {
      return this.graphqlService.getProduct(action.payload).pipe(
        map(res => filterActions.initProductSuccess({data: res})),
        catchError(err => of(filterActions.initProductFailure({err})))
      );
    })
  )
);

这样第二种方案中存入store的预渲染数据会被effects检测到，避免重复发起请求。

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