如何在Next.js中使用createServerContext传递数据给深层服务组件

你的判断是对的：createServerContext就是React专为服务端组件设计的Context方案，用来在服务端组件树中传递数据，完全不需要让子组件变成客户端组件，刚好匹配你的需求。下面是具体的实现步骤和注意事项：

1. 创建Server Context #

首先创建一个单独的文件（比如app/posts/post-context.ts），用来定义和导出Context：

import { createServerContext, useContext } from 'react';
import { getPost } from '@/lib/posts'; // 引入你的文章数据获取函数

// 定义Context的类型，匹配getPost返回的数据结构
type PostContextType = {
  post: Awaited<ReturnType<typeof getPost>>;
};

// 创建Server Context，第二个参数是默认值（用于类型提示和兜底）
const PostContext = createServerContext<PostContextType>({
  post: { title: '', createdAt: '', /* 补充你的文章默认字段 */ },
});

// 封装自定义Hook，简化Context消费
export function usePostContext() {
  return useContext(PostContext);
}

export default PostContext;

2. 在服务端页面中提供Context值 #

你的/posts/[id]/page.tsx是服务端组件（async函数默认属于服务端组件），可以直接在获取数据后用Provider包裹子组件：

import PostContext, { usePostContext } from './post-context';
import { getPost } from '@/lib/posts';

export default async function Post({ params: { id: postId } }: { params: { id: string }}) {
  const post = await getPost(postId);
  
  return (
    <PostContext.Provider value={{ post }}>
      <h1>{post.title}</h1>
      <ChildComponent />
    </PostContext.Provider>
  );
}

// 深层子组件，服务端组件，直接消费Context
function ChildComponent() {
  const { post } = usePostContext();  
  return <div>{post.createdAt}</div>;
}

3. 关键注意事项 #

• 仅服务端组件可用：createServerContext只能在服务端组件中创建和消费，如果你的子组件需要是客户端组件（比如包含交互逻辑），则无法使用这个方案，此时要么用普通的createContext（会让子组件变成客户端组件），要么通过props逐层传递数据。
• 无客户端副作用：Server Context的数据只存在于服务端渲染阶段，不会被序列化到客户端，因此不会增加客户端bundle体积，也不会出现hydration不匹配的问题。
• 默认值的作用：创建Context时的默认值主要用于TypeScript类型提示，以及在未正确提供Provider的情况下避免报错，实际业务中只要上层有Provider，就会使用传递的真实数据。

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