Next.js使用getStaticProps时如何让useSelector获取到Redux预渲染数据？

• Next.js 的 getStaticProps 运行在服务端独立执行上下文中，你在该函数内调用 appStore.dispatch 操作的是服务端侧的 Redux store 实例，和用户浏览器端初始化的客户端 Redux store 完全隔离，服务端 store 中更新的状态不会自动同步到客户端。
• 你当前只把接口返回的 data 作为 getStaticProps 的返回值传递给页面，没有把服务端 store 的全量状态同步到客户端做水合，客户端 store 初始化时还是默认初始值，useSelector 自然读取不到服务端更新的状态。
• 客户端 useEffect 中执行 dispatch 时操作的就是当前浏览器侧的 store 实例，状态更新后 useSelector 可以正常读取到值。

1. 调整 getStaticProps 逻辑，将服务端 store 的全量状态作为返回值传递给页面

export const getStaticProps: GetStaticProps = async () => {
  await appStore.dispatch(
    loginThunks.login.loginAsGuest({
      url: process.env.NEXT_PUBLIC_API,
      tenantId: 99,
    })
  );
  // 提取服务端store的全量预加载状态
  const preloadedState = appStore.getState();
  return {
    props: { preloadedState },
  };
};

2. 修改客户端 Redux store 初始化逻辑，用服务端返回的预加载状态作为客户端 store 的初始值

// store 初始化工具函数调整
export const createAppStore = (preloadedState?: RootState) => {
  return configureStore({
    reducer: rootReducer,
    preloadedState: preloadedState ?? {},
  });
};

// _app.tsx 中注入store时传入预加载状态
export default function App({ Component, pageProps }) {
  const store = createAppStore(pageProps.preloadedState);
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

注意：如果你的项目存在多页面预渲染场景，需要注意不同页面返回的预加载状态的合并逻辑，避免覆盖客户端已有的用户专属状态。

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