如何在服务端与客户端高效处理多依赖状态问题

四处寻找解决方案却始终无果，希望能有人帮我解决当前问题。

项目结构 #

| App
|-- Layout
|  |-- Navbar.tsx (服务端) - 需要`user`和`userData`
|  |  |-- DesktopMenu.tsx (服务端) - 需要`user`和`userData`
|  |-- {children} -> page.tsx (服务端) - 需要`user`判断未登录时重定向
|  |  |  | <Component>.tsx in page.tsx (客户端) - 需要`profile`

组件依赖说明 #

Navbar.tsx #

• 依赖查询userData，需先获取user，用于控制菜单项的显示隐藏。

page.tsx #

• 依赖查询profile，需先获取user；服务端通过user判断未登录时执行重定向，同时预获取profile供客户端组件使用。

.tsx #

• 需要profile状态展示数据，依赖服务端page.tsx预获取的状态。

遇到的问题 #

1. 两个服务端组件需要同一user状态加载其他数据，但const user = await queryClient.fetchQuery({})无法将状态共享给其他服务端组件及客户端组件，且因Layout包含children，无法通过props传递。
2. 需要在服务端和客户端使用同一状态做验证，要求状态同步，但官方文档不建议这么做。不过服务端重定向未登录用户显然是更优方案：用await queryClient.prefetchQuery({})能让状态在客户端可用，但无法在服务端获取；用const user = await queryClient.fetchQuery({})则无法同步到客户端。

目标 #

实现数据仅获取一次，并保持服务端与客户端状态同步。

1. 根布局统一获取+React Query脱水同步 #

核心思路是在根Layout层面统一获取user及依赖数据，利用React Query的服务端缓存实现服务端组件间的状态共享，再通过脱水（Dehydration）机制把服务端缓存同步到客户端，全程只请求一次数据。

根Layout实现 #

在根Layout中创建QueryClient，统一获取user和依赖的userData，完成后脱水缓存：

import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const queryClient = new QueryClient();
  
  // 统一获取user，存入服务端缓存
  await queryClient.fetchQuery({
    queryKey: ['user'],
    queryFn: () => fetch('/api/user').then(res => res.json()),
  });

  // 基于已缓存的user预获取userData
  await queryClient.prefetchQuery({
    queryKey: ['userData'],
    queryFn: () => fetch('/api/user/data').then(res => res.json()),
    enabled: !!queryClient.getQueryData(['user']),
  });

  // 序列化缓存状态，供客户端复用
  const dehydratedState = dehydrate(queryClient);

  return (
    <html>
      <body>
        <HydrationBoundary state={dehydratedState}>
          {children}
        </HydrationBoundary>
      </body>
    </html>
  );
}

服务端组件读取缓存 #

Navbar和page.tsx直接从QueryClient缓存读取数据，无需重复请求：

// Navbar.tsx
import { useQueryClient } from '@tanstack/react-query';

export default async function Navbar() {
  const queryClient = useQueryClient();
  const user = queryClient.getQueryData(['user']);
  const userData = queryClient.getQueryData(['userData']);

  return <DesktopMenu user={user} userData={userData} />;
}

// page.tsx
import { useQueryClient } from '@tanstack/react-query';
import { redirect } from 'next/navigation';

export default async function Page() {
  const queryClient = useQueryClient();
  const user = queryClient.getQueryData(['user']);

  // 服务端重定向未登录用户
  if (!user) {
    redirect('/login');
  }

  // 预获取profile供客户端组件使用
  await queryClient.prefetchQuery({
    queryKey: ['profile'],
    queryFn: () => fetch(`/api/profile/${user.id}`).then(res => res.json()),
  });

  return <Component />;
}

2. 客户端组件复用状态 #

客户端的<Component>.tsx直接用useQuery获取profile，React Query会自动复用服务端预获取的脱水数据，不会重复发起请求：

// <Component>.tsx
import { useQuery } from '@tanstack/react-query';

export default function Component() {
  const { data: profile } = useQuery({
    queryKey: ['profile'],
    queryFn: () => fetch('/api/profile').then(res => res.json()),
  });

  return <div>用户名：{profile?.username}</div>;
}

关键说明 #

• 服务端组件共享缓存：Next.js中根Layout创建的QueryClient会自动传递给所有子服务端组件，因此它们可以直接读取缓存数据，无需props传递。
• 脱水机制合规：官方文档不建议的是手动同步服务端与客户端状态，而React Query的脱水/ hydration是官方提供的标准同步方案，完全符合最佳实践。
• 依赖控制：所有依赖user的查询通过enabled选项确保仅在user存在时执行，避免无效请求。

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