如何在Next.js 13中使用Redux Toolkit？兼谈服务端组件兼容

你的理解有误：Redux Provider 不会让所有子组件变成客户端组件 #

Next.js 13 App Router 里，组件是服务端渲染还是客户端渲染，只看自己的文件里有没有加'use client'，和父组件是不是客户端组件没关系。

哪怕你用带'use client'的 Redux Provider 把整个应用包起来，只要某个子组件的文件没加'use client'，它照样是服务端组件。唯一要注意的是：服务端组件不能直接用 Redux 的那些客户端钩子（比如useSelector、useDispatch），因为这些钩子依赖浏览器环境，但这完全不影响服务端组件本身做服务端渲染的能力。

举个实际场景：

• 在app/layout.tsx里引入带'use client'的 Redux Provider，作为根布局的一部分
• app/page.tsx没加'use client'，它还是服务端组件，能正常做服务端渲染，只是不能直接读Redux状态
• 如果page.tsx里嵌套了一个components/ClientCounter.tsx，这个组件加了'use client'，那它就能正常用Redux的钩子，同时完全不影响page.tsx的服务端渲染

Next.js 13 中支持服务端组件的全局状态管理方案 #

1. 原生请求级状态：用next/headers和next/cookies #

如果你的全局状态和当前请求绑定（比如用户会话、请求头信息、Cookie），服务端组件可以直接用Next.js内置的headers()、cookies()API拿数据，根本不需要额外的状态管理库。这种方式纯服务端渲染，没客户端状态的额外开销。

2. 服务端拿数据后传给客户端组件 #

服务端组件可以用async/await提前获取数据，然后通过props把数据传给嵌套的客户端组件，由客户端组件负责后续的状态更新。这种方式适合状态不需要跨很多无关联组件共享的场景，能最大程度保留服务端渲染的优势。

3. 轻量状态库（Zustand/Jotai） #

这类库比Redux灵活很多，支持在客户端组件里用，同时服务端组件可以传递初始状态：

• 服务端组件先获取初始数据
• 把初始数据传给客户端组件的状态Provider
• 客户端组件用库的钩子访问和更新状态

比如用Zustand的示例：

// 服务端组件 app/page.tsx
import ClientComponent from './ClientComponent';

export default async function Page() {
  // 服务端获取初始数据
  const initialData = await fetch('/api/initial-data').then(res => res.json());
  return <ClientComponent initialData={initialData} />;
}

// 客户端组件 app/ClientComponent.tsx
'use client';
import { create } from 'zustand';
import { useEffect } from 'react';

// 创建store
const useDataStore = create((set) => ({
  data: null,
  updateData: (newData) => set({ data: newData }),
}));

export default function ClientComponent({ initialData }) {
  const { updateData } = useDataStore();
  
  // 用服务端数据初始化状态
  useEffect(() => {
    updateData(initialData);
  }, [initialData, updateData]);
  
  // 使用状态
  const { data } = useDataStore();
  return <div>当前数据：{JSON.stringify(data)}</div>;
}

4. Redux的优化用法 #

如果一定要用Redux，没必要把整个应用都包在Provider里，只在需要用Redux的客户端组件树外面加Provider就行。或者，服务端组件先获取初始状态，把它传给Redux Provider的initialState属性，这样服务端组件还是服务端渲染，只有用到Redux的部分才是客户端组件。

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