NextJS 13.4中如何从服务端为客户端持久化并设置全局状态？

1. 根Layout中统一获取用户信息 #

既然根layout.tsx是所有路由的父组件，且负责认证检查，就把用户信息的获取逻辑放在这里统一执行——只请求一次，避免所有页面重复调用接口。

假设你用Session类认证方式，示例代码如下：

// app/layout.tsx
import { getUserFromSession } from '@/lib/auth';
import Navbar from './navbar';
import UserProvider from './user-provider';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 仅在服务端执行一次，从Session中获取用户信息
  const user = await getUserFromSession();

  return (
    <html lang="zh-CN">
      <body>
        <Navbar user={user} />
        {/* 用Provider包裹所有子组件，传递服务端获取的用户初始值 */}
        <UserProvider initialUser={user}>
          {children}
        </UserProvider>
      </body>
    </html>
  );
}

2. 服务端组件：通过Props直接传递 #

对于服务端组件，直接通过props接收根Layout传递的用户信息即可，无需额外请求：

// app/dashboard/page.tsx（服务端组件）
export default function DashboardPage({ user }: { user: User | null }) {
  if (!user) {
    return <div>请先登录</div>;
  }

  return <div>欢迎回来，{user.name}</div>;
}

如果有多层子布局，可逐层传递props，也可以用React的Context（注意服务端组件的Context只能传递可序列化数据）。

3. 客户端组件：用Context API共享 #

对于需要交互的客户端组件，创建客户端Context存储用户信息，同时复用服务端传递的初始值，避免hydration不匹配：

先创建user-provider.tsx（客户端组件）：

// app/user-provider.tsx
'use client';

import { createContext, useContext, useState } from 'react';

type User = {
  id: string;
  name: string;
  email: string;
};

type UserContextType = {
  user: User | null;
  updateUser: (user: User | null) => void;
};

const UserContext = createContext<UserContextType | undefined>(undefined);

export default function UserProvider({
  initialUser,
  children,
}: {
  initialUser: User | null;
  children: React.ReactNode;
}) {
  const [user, setUser] = useState<User | null>(initialUser);

  // 客户端更新用户信息的方法（比如登录/退出后同步）
  const updateUser = (newUser: User | null) => {
    setUser(newUser);
    // 这里可同步更新Session，比如调用后端API
  };

  return (
    <UserContext.Provider value={{ user, updateUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义Hook简化客户端组件调用
export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser必须在UserProvider内部使用');
  }
  return context;
}

然后在客户端组件中使用：

// app/profile/page.tsx（客户端组件，需加'use client'）
'use client';

import { useUser } from '../user-provider';

export default function ProfilePage() {
  const { user } = useUser();

  if (!user) {
    return <div>请先登录</div>;
  }

  return (
    <div>
      <h1>个人资料</h1>
      <p>邮箱：{user.email}</p>
    </div>
  );
}

4. 核心注意事项 #

• 避免重复请求：所有用户信息获取逻辑仅在根Layout执行一次，服务端组件靠props接收，客户端组件复用初始值，无需二次调用接口。
• Hydration一致性：客户端Context的初始值必须和服务端传递的完全一致，否则会出现渲染不匹配错误。
• 安全性：确保getUserFromSession是服务端安全逻辑，不会把敏感信息泄露到客户端。

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