Angular Universal技术问题：如何阻止NGRX替换SSR渲染的值

问题核心原因 #

SSR渲染时服务器端已将数据存入NGRX Store并完成页面渲染，但客户端初始化时Store状态被重置为空，导致页面hydration后原有数据被清空，随后客户端重新发起API请求获取数据，引发闪烁。

解决步骤 #

1. 实现NGRX状态的跨端传递（TransferState） #

通过Angular的TransferState机制，将服务器端生成的NGRX状态序列化后传递到客户端，客户端启动时直接复用该状态，避免Store初始化为空。

服务器端配置（app.server.module.ts）

import { NgModule } from '@angular/core';
import { ServerModule, TransferState, makeStateKey } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { Store } from '@ngrx/store';
import { take } from 'rxjs/operators';

const NGRX_STATE_KEY = makeStateKey<any>('rootNgrxState');

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {
  constructor(private store: Store, private transferState: TransferState) {}

  ngOnDestroy() {
    // 服务器端渲染完成后，将Store当前状态存入TransferState
    this.store.pipe(take(1)).subscribe((state) => {
      this.transferState.set(NGRX_STATE_KEY, state);
    });
  }
}

客户端配置（app.module.ts）

import { NgModule } from '@angular/core';
import { BrowserModule, TransferState, makeStateKey } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { reducers } from './store/reducers';
import { AppComponent } from './app.component';

const NGRX_STATE_KEY = makeStateKey<any>('rootNgrxState');

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'your-app-id' }),
    StoreModule.forRoot(reducers, {
      // 客户端初始化Store时，优先从TransferState读取服务器端传递的状态
      initialState: (transferState: TransferState) => {
        return transferState.get(NGRX_STATE_KEY, {});
      },
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 调整数据获取逻辑，避免客户端重复请求 #

在Effects或路由守卫中，判断当前环境及Store状态，避免客户端重复发起已在SSR阶段完成的API请求。

示例：Effect中跳过重复请求

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { of } from 'rxjs';
import { map, switchMap, withLatestFrom, take } from 'rxjs/operators';
import { fetchData, fetchDataSuccess } from './actions';
import { selectDataExists } from './selectors';
import { DataService } from '../services/data.service';

export class DataEffects {
  fetchData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(fetchData),
      withLatestFrom(this.store.select(selectDataExists)),
      switchMap(([action, dataExists]) => {
        // 如果是浏览器环境且数据已存在，直接跳过请求
        if (isPlatformBrowser(this.platformId) && dataExists) {
          return of([]);
        }
        // 否则发起API请求
        return this.dataService.getData().pipe(
          map((data) => fetchDataSuccess({ data }))
        );
      })
    )
  );

  constructor(
    private actions$: Actions,
    private store: Store,
    private dataService: DataService,
    @Inject(PLATFORM_ID) private platformId: object
  ) {}
}

3. 验证Hydration配置 #

虽然provideClientHydration本身不直接解决状态丢失问题，但需确保客户端Hydration过程中，Store状态已提前通过TransferState初始化，避免Hydration时重置状态。确保provideClientHydration()已正确添加到客户端的app.config.ts中：

import { ApplicationConfig, provideClientHydration } from '@angular/core';

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

关键注意事项 #

• 确保NGRX的reducers是纯函数，状态序列化/反序列化过程中无副作用
• 避免在客户端初始化阶段（如AppComponent的ngOnInit）直接发起API请求，改用Effects或路由守卫结合状态判断逻辑
• 测试时禁用浏览器缓存，确保每次请求都能复现问题并验证修复效果

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