Next.js 13 + Redux Toolkit：如何实现服务端与客户端状态同步？

是否需要同步服务端与客户端的Redux状态？ #

分场景判断，但核心逻辑是：服务端的Redux实例是每个请求独立创建的，客户端的Redux实例是浏览器端单例。两者状态默认完全隔离，服务端渲染的初始状态会在客户端hydrate时作为初始值，但客户端修改后的状态不会自动同步到服务端——也没必要强行同步服务端Redux实例，除非你需要把状态持久化到后端数据库。

你遇到的isRedirect状态丢失问题，本质是：服务端每次渲染都会初始化全新的Redux状态（isRedirect: false），当你跳转到首页时，如果首页是服务端组件，会重新触发服务端渲染，客户端的修改状态会被服务端的初始状态覆盖；即使是客户端路由跳转，若没有持久化状态，页面刷新后也会重置。

解决状态丢失的具体方案 #

1. 临时UI状态：别用Redux，改用路由state或本地状态 #

如果isRedirect只是登录后跳转的临时标记，完全没必要放到Redux里：

• 用Next.js路由的state传递：

  // 用户页客户端组件中跳转
  import { useRouter } from 'next/navigation';
  const router = useRouter();
  // 跳转时携带状态
  router.push('/home', { state: { isRedirect: true } });
  
  // 首页读取状态
  const { state } = useRouter();
  const isRedirect = state?.isRedirect || false;
  

• 或者直接用React的useState，仅在当前组件/页面内维护状态。

2. 需要跨页面保留的状态：持久化到本地存储 #

如果isRedirect是需要跨页面、跨刷新保留的状态，把状态存在localStorage或sessionStorage，Redux初始化时读取：

import { createSlice } from '@reduxjs/toolkit';

// 初始化时从本地存储读取，避免服务端渲染报错
const initialState = {
  isRedirect: typeof window !== 'undefined' 
    ? JSON.parse(localStorage.getItem('isRedirect')) || false 
    : false
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setIsRedirect: (state, action) => {
      state.isRedirect = action.payload;
      // 同步到本地存储
      if (typeof window !== 'undefined') {
        localStorage.setItem('isRedirect', JSON.stringify(action.payload));
      }
    }
  }
});

export const { setIsRedirect } = userSlice.actions;
export default userSlice.reducer;

3. 服务端渲染需要用到的状态：存在Cookie中 #

如果某个状态需要在服务端渲染时使用（比如用户登录状态），别同步到服务端Redux，而是把关键数据存在Cookie里：

• 客户端登录后，把token或用户标识写入Cookie；
• 在服务端的middleware、getServerSideProps或generateMetadata中读取Cookie，获取用户信息，初始化Redux的服务端状态；
• 这样客户端hydrate时会继承服务端的初始状态，避免状态不一致。

客户端向服务端同步状态是否合理？ #

大部分场景下不合理：

• 服务端的Redux实例是请求级别的，每个请求都会重新创建，同步状态到服务端实例没有任何持久化意义，下一个请求还是会重置；
• 如果是需要持久化的业务数据（比如用户修改了个人资料），应该通过API请求把数据同步到后端数据库，而不是服务端Redux；
• 只有当你需要服务端渲染时使用客户端的最新状态，才需要通过Cookie、URL参数等方式把关键数据传递给服务端，由服务端初始化Redux状态，这不属于“客户端同步服务端Redux状态”的范畴。

内容的提问来源于stack exchange，提问作者Sujeith Gopi Nath