Next.js 13中服务端组件如何使用Context API及传递服务端数据？

完全可以兼顾服务器端数据获取的安全性和Context API的客户端状态共享优势，核心思路是在服务器端组件中完成用户数据的获取，再将数据传递给客户端的Context Provider，具体实现步骤如下：

1. 创建客户端Context及Provider组件 #

首先需要创建一个带'use client'指令的Context组件，负责接收服务器端传来的用户数据并提供给下游客户端组件：

// app/components/UserContext.tsx
'use client';

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

type User = {
  id: string;
  name: string;
  email: string;
  // 其他用户字段
};

type UserContextType = {
  user: User | null;
};

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

export function UserProvider({ 
  children, 
  user 
}: { 
  children: ReactNode; 
  user: User | null 
}) {
  return (
    <UserContext.Provider value={{ user }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

2. 在服务器端组件中获取用户数据并注入Provider #

Next.js 13的layout.tsx或page.tsx默认是服务器端组件，你可以在这里从请求头（或Cookie）中提取token，调用后端接口获取用户信息，再将数据传递给上面创建的UserProvider：

// app/layout.tsx
import { UserProvider } from './components/UserContext';
import { headers } from 'next/headers';

async function getUserFromToken() {
  const headersList = headers();
  const authToken = headersList.get('Authorization')?.replace('Bearer ', '');
  
  if (!authToken) {
    return null;
  }

  // 调用后端API验证token并获取用户信息（服务器端请求，不会暴露token给客户端）
  const res = await fetch('https://your-api-domain.com/api/user', {
    headers: {
      Authorization: `Bearer ${authToken}`,
    },
    // 确保请求不会被缓存，每次请求都获取最新数据
    cache: 'no-store',
  });

  if (!res.ok) {
    return null;
  }

  return res.json();
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUserFromToken();

  return (
    <html lang="en">
      <body>
        <UserProvider user={user}>
          {children}
        </UserProvider>
      </body>
    </html>
  );
}

3. 在客户端组件中使用Context数据 #

现在任何标记了'use client'的客户端组件都可以通过useUser钩子获取服务器端传来的用户数据：

// app/components/UserProfile.tsx
'use client';

import { useUser } from './UserContext';

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

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

  return (
    <div>
      <h2>用户信息</h2>
      <p>姓名：{user.name}</p>
      <p>邮箱：{user.email}</p>
    </div>
  );
}

关键注意事项 #

• 安全性：所有token验证和用户数据请求都在服务器端完成，token不会暴露给客户端，避免了前端直接处理敏感信息的风险。
• 灵活性：如果只需要在特定页面共享用户数据，可以在对应的服务器端page.tsx中获取数据并包裹该页面的组件，无需全局注入。
• 数据新鲜度：根据业务需求调整fetch的缓存策略，比如cache: 'no-store'确保每次请求都获取最新用户数据，或者revalidate设置缓存有效期。

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