React Server Components 下的状态管理策略

Wed, 04 Sep 2024 00:00:00 +0000

用 RSC 之后，我扔掉了大半个 Redux。这篇聊聊在 Server Components 主导的架构里，状态到底该放哪。

背景：RSC 改变了什么

传统 React SPA 里，所有数据都要先 fetch 到客户端，再用状态管理库（Redux、Zustand、React Query）缓存和分发。

RSC 出现后，服务端组件可以直接 await 数据库查询，数据天然在服务端，根本不需要传到客户端再管理。

1
2
3
4
5


传统 SPA：
Browser → API → Redux Store → Component

RSC 架构：
Server Component → DB → HTML → Browser

这意味着大量"服务端数据的客户端缓存"需求直接消失了。

状态分类模型

在 RuiToolAI 项目里，我把状态分成四类：

类型	存放位置	工具
服务端数据	Server Component	直接 await
URL 参数	URL search params	nuqs
客户端全局	内存	Zustand
表单	组件局部	react-hook-form

原则很简单：能放服务端就放服务端，能放 URL 就放 URL，实在不行才用 Zustand。

服务端状态：直接读，不缓存

Server Component 里直接查数据库，不需要任何状态管理库。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// src/app/(sites)/history/page.tsx
import { getCloudflareContext } from "@opennextjs/cloudflare";
import { drizzle } from "drizzle-orm/d1";
import * as schema from "@/db/schema";
import { eq, desc } from "drizzle-orm";

export default async function HistoryPage() {
 const { env } = await getCloudflareContext();
 const db = drizzle(env.NEXT_TAG_CACHE_D1, { schema });

 // 直接查，不需要 useEffect、不需要 loading state
 const session = await getSessionFromCookie();
 const items = await db
 .select()
 .from(schema.generatedImages)
 .where(eq(schema.generatedImages.userId, session.user.id))
 .orderBy(desc(schema.generatedImages.createdAt))
 .limit(50);

 return <HistoryClient initialItems={items} />;
}

关键点：数据作为 initialItems prop 传给客户端组件，客户端组件只负责交互逻辑（删除、轮询状态更新）。

何时需要 revalidate

Server Component 的数据在请求时是新鲜的，但如果用了 Next.js 缓存，需要手动 revalidate：

1
2
3
4
5
6
7
8
9


// Server Action 里操作完数据后
import { revalidatePath } from "next/cache";

export const deleteImageAction = actionClient
 .inputSchema(deleteImageSchema)
 .action(async ({ parsedInput }) => {
 // ... 删除逻辑
 revalidatePath("/history");
 });

URL 状态：nuqs 管理搜索参数

URL 状态的好处：刷新不丢失、可分享、浏览器前进后退正常工作。

在 RuiToolAI 里，管理后台的筛选条件就放在 URL 里：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// src/app/(admin)/admin/users/page.tsx
import { parseAsString, parseAsInteger, useQueryStates } from "nuqs";

// Server Component 读取 URL 参数
export default async function UsersPage({
 searchParams,
}: {
 searchParams: { page?: string; search?: string };
}) {
 const page = Number(searchParams.page ?? 1);
 const search = searchParams.search ?? "";

 const users = await queryUsers({ page, search });
 return <UsersTable users={users} />;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// Client Component 更新 URL 参数
"use client";
import { useQueryState } from "nuqs";

function SearchInput() {
 const [search, setSearch] = useQueryState("search", {
 defaultValue: "",
 shallow: false, // 触发服务端重新渲染
 });

 return (
 <input
 value={search}
 onChange={(e) => setSearch(e.target.value)}
 placeholder="搜索用户..."
 />
 );
}

shallow: false 会触发完整的服务端重新渲染，数据自动更新，不需要任何额外的状态管理。

客户端全局状态：Zustand 最小化

Zustand 只用于真正需要跨组件共享的客户端状态。在这个项目里主要是两个：

Session Store

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// src/state/session.ts
import { create } from "zustand";

interface SessionStore {
 user: User | null;
 credits: number;
 setUser: (user: User | null) => void;
 setCredits: (credits: number) => void;
}

export const useSessionStore = create<SessionStore>((set) => ({
 user: null,
 credits: 0,
 setUser: (user) => set({ user }),
 setCredits: (credits) => set({ credits }),
}));

Session 信息在 Layout 里初始化，之后客户端组件直接读取，不需要每次都请求服务端：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// src/components/session-provider.tsx
"use client";
import { useEffect } from "react";
import { useSessionStore } from "@/state/session";

export function SessionProvider({
 user,
 credits,
}: {
 user: User;
 credits: number;
}) {
 const { setUser, setCredits } = useSessionStore();

 useEffect(() => {
 setUser(user);
 setCredits(credits);
 }, [user, credits]);

 return null;
}

生成任务状态

多任务并发时，需要在生成页面和历史页面之间共享"进行中的任务数量"：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// src/state/generation.ts
import { create } from "zustand";

interface GenerationStore {
 pendingCount: number;
 increment: () => void;
 decrement: () => void;
}

export const useGenerationStore = create<GenerationStore>((set) => ({
 pendingCount: 0,
 increment: () => set((s) => ({ pendingCount: s.pendingCount + 1 })),
 decrement: () =>
 set((s) => ({ pendingCount: Math.max(0, s.pendingCount - 1) })),
}));

表单状态：react-hook-form 局部管理

表单状态是最局部的，用 react-hook-form 管理，不需要提升到全局：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


// src/app/(auth)/sign-up/sign-up.client.tsx
"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useAction } from "next-safe-action/hooks";
import { signUpSchema, type SignUpSchema } from "@/schemas/signup.schema";
import { signUpAction } from "./sign-up.actions";

export function SignUpForm() {
 const form = useForm<SignUpSchema>({
 resolver: zodResolver(signUpSchema),
 defaultValues: { email: "", password: "" },
 });

 const { execute, status } = useAction(signUpAction, {
 onSuccess: () => {
 toast.success("注册成功！");
 },
 onError: ({ error }) => {
 toast.error(error.serverError ?? "注册失败");
 },
 });

 return (
 <form onSubmit={form.handleSubmit(execute)}>
 {/* 表单字段 */}
 </form>
 );
}

实战：生成历史页面的状态设计

历史页面是这个项目里状态最复杂的页面，综合用了所有四种状态：

1
2
3
4
5
6
7


服务端状态（initialItems）
 ↓ 传给客户端
客户端局部状态（items: useState）
 ↓ 轮询更新
Server Action（checkImageStatusAction）
 ↓ 完成后
revalidatePath（可选，刷新服务端缓存）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


// src/app/(sites)/history/client.tsx
"use client";

export function HistoryClient({
 initialItems,
}: {
 initialItems: GeneratedImage[];
}) {
 // 客户端局部状态：从服务端初始值开始
 const [items, setItems] = useState(initialItems);
 const [failedExpanded, setFailedExpanded] = useState(false);

 // 找出所有 processing 的任务
 const processingIds = items
 .filter((item) => item.status === "processing" || item.status === "pending")
 .map((item) => item.id);

 // 轮询逻辑
 const pollAll = useCallback(async () => {
 for (const id of processingIds) {
 const result = await checkImageStatusAction({ id });
 if (result?.data) {
 setItems((prev) =>
 prev.map((item) => (item.id === id ? result.data! : item))
 );
 }
 }
 }, [processingIds]);

 useEffect(() => {
 if (processingIds.length === 0) return;
 pollAll();
 const interval = setInterval(pollAll, 4000);
 // tab 切换回来立即轮询
 const handleVisibility = () => {
 if (document.visibilityState === "visible") pollAll();
 };
 document.addEventListener("visibilitychange", handleVisibility);
 return () => {
 clearInterval(interval);
 document.removeEventListener("visibilitychange", handleVisibility);
 };
 }, [processingIds.length, pollAll]);

 // 删除
 const { execute: deleteImage } = useAction(deleteGeneratedImageAction, {
 onSuccess: ({ input }) => {
 setItems((prev) => prev.filter((item) => item.id !== input.id));
 },
 });

 // 渲染...
}

常见误区

误区 1：在 Server Component 里用 useState

1
2
3
4
5
6
7
8
9


// 错误：Server Component 不能用 hooks
export default async function Page() {
 const [data, setData] = useState(null); // 报错
}

// 正确：直接 await
export default async function Page() {
 const data = await fetchData();
}

误区 2：把服务端数据放进 Zustand

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 不必要：用 Zustand 缓存服务端数据
const useUserStore = create((set) => ({
 users: [],
 fetchUsers: async () => {
 const users = await fetch("/api/users").then((r) => r.json());
 set({ users });
 },
}));

// 直接在 Server Component 查询
export default async function UsersPage() {
 const users = await db.select().from(schema.users);
 return <UsersList users={users} />;
}

误区 3：URL 状态用 useState 管理

1
2
3
4
5
6
7


// 刷新后丢失
const [filter, setFilter] = useState("all");

// 放 URL 里，刷新不丢失，可分享
const [filter, setFilter] = useQueryState("filter", {
 defaultValue: "all",
});

总结

RSC 架构下的状态管理原则：

服务端数据 → Server Component 直接 await，不需要任何状态库
URL 参数 → nuqs，刷新不丢失，支持分享
客户端全局 → Zustand，只放真正需要跨组件共享的少量状态
表单 → react-hook-form，局部管理

这套分层策略让代码更简单，性能更好，也更容易维护。

React on HanGR的碎碎念