Angular 17 SSR场景下如何实现NgRx Store水合？

1. 服务端序列化并传递Store状态 #

需要在服务端渲染完成后，把Store的当前状态提取出来，传递到客户端页面中，有两种可靠实现方式：

方式一：直接注入到window对象 #

在服务端渲染入口（如server.ts或main.server.ts）中，获取Store状态并插入到HTML的<script>标签里：

// 服务端渲染逻辑
const store = moduleRef.injector.get(Store);
// 等待所有异步状态加载完成（比如路由解析、effects执行）
await new Promise(resolve => setTimeout(resolve, 0));
const initialState = store.getState();

// 将状态注入到HTML末尾，确保客户端能读取
const stateScript = `<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};</script>`;
const finalHtml = html.replace('</body>', `${stateScript}</body>`);

方式二：使用Angular TransferState（推荐） #

利用Angular官方的TransferState服务安全传递状态，避免全局变量污染：

• 服务端：将Store状态存入TransferState

import { TransferState, makeStateKey } from '@angular/platform-browser';

const STATE_KEY = makeStateKey<any>('initialState');
const transferState = moduleRef.injector.get(TransferState);
transferState.set(STATE_KEY, store.getState());

2. 客户端初始化Store时加载初始状态 #

在客户端启动时，读取服务端传递的状态，作为Store的初始状态，覆盖默认值：

对应方式一（window对象） #

在客户端入口（main.ts或独立组件配置中）：

declare global {
  interface Window {
    __INITIAL_STATE__: any;
  }
}

// 初始化Store时传入服务端状态
provideStore(rootReducer, {
  initialState: window.__INITIAL_STATE__ || {}
})

对应方式二（TransferState） #

import { TransferState, makeStateKey } from '@angular/platform-browser';

const STATE_KEY = makeStateKey<any>('initialState');

// 从TransferState读取服务端传递的状态
provideStore(rootReducer, {
  initialState: inject(TransferState).get(STATE_KEY, {})
})

3. 避免客户端重复发起请求 #

在NgRx Effects中增加判断逻辑，如果状态已存在，就不再发起重复请求，彻底解决页面闪烁：

// tags.effect.ts
loadTags$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadTags),
    withLatestFrom(this.store.select(selectTags)),
    switchMap(([_, existingTags]) => {
      // 如果已有数据，直接返回成功action，不发起HTTP请求
      if (existingTags?.length) {
        return of(loadTagsSuccess({ tags: existingTags }));
      }
      // 否则正常发起请求
      return this.tagsService.getTags().pipe(
        map(tags => loadTagsSuccess({ tags }))
      );
    })
  )
);

4. 处理序列化异常 #

如果Store状态包含循环引用或不可序列化的数据（如函数、Symbol），JSON.stringify会报错，需要添加replacer函数过滤：

const initialStateStr = JSON.stringify(initialState, (key, value) => {
  // 过滤不可序列化的属性
  if (typeof value === 'function' || typeof value === 'symbol') {
    return undefined;
  }
  return value;
});

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