Next.js（App Router）中能否在fetch中用Context API？如何高效传上下文？

关于Next.js App Router中fetch能否使用Context API #

不行。React Context API是客户端专属的React特性：

• 服务端组件运行在服务器端，没有React上下文的运行环境，无法调用useContext，自然也没法在服务端的fetch请求里访问Context。
• 客户端组件里的fetch虽然能通过useContext拿到上下文，但这种fetch是在浏览器端执行的，不是服务端渲染时的请求。如果你的数据库查询是在服务端完成的，客户端Context帮不上忙。

更高效的上下文传递/获取方案 #

替代手动传参的方式，推荐这几种更高效的实现：

1. 用Next.js内置的headers()/cookies()函数（服务端组件可用） #

如果你的上下文信息来自请求头（比如认证Token）、Cookie（比如用户会话ID），直接用Next.js提供的这两个内置函数获取，不需要手动传参：

// 服务端组件中
import { headers, cookies } from 'next/headers';

async function fetchData() {
  const authToken = headers().get('Authorization');
  const userId = cookies().get('userId')?.value;
  // 用这些信息执行数据库查询
  const data = await db.query('SELECT * FROM ... WHERE user_id = ?', [userId]);
  return data;
}

2. 封装服务端上下文工具函数 #

如果上下文是自定义业务逻辑生成的（比如从数据库拉取的用户配置、多租户信息），可以封装一个服务端可用的工具函数，直接在服务端组件里调用获取上下文，避免手动传递：

// utils/server-context.ts
import { headers } from 'next/headers';

export async function getServerAppContext() {
  const tenantId = headers().get('X-Tenant-ID');
  // 从数据库/缓存获取对应租户的上下文信息
  const tenantConfig = await db.query('SELECT * FROM tenants WHERE id = ?', [tenantId]);
  return {
    tenantId,
    tenantConfig,
    // 其他上下文信息
  };
}

// 在服务端组件中使用
async function ServerComponent() {
  const appContext = await getServerAppContext();
  const data = await db.query('SELECT * FROM ... WHERE tenant_id = ?', [appContext.tenantId]);
  return <div>{data}</div>;
}

3. 用Middleware注入上下文信息 #

如果需要给所有请求统一添加上下文，可以用Next.js的Middleware，把自定义上下文注入到请求头里，之后在服务端组件里通过headers()获取：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 从请求中提取或生成上下文信息
  const customContext = { userId: '123' };
  // 把上下文转成字符串注入到请求头
  const response = NextResponse.next();
  response.headers.set('X-Custom-Context', JSON.stringify(customContext));
  return response;
}

// 服务端组件中获取
import { headers } from 'next/headers';

async function ServerComponent() {
  const contextStr = headers().get('X-Custom-Context');
  const appContext = contextStr ? JSON.parse(contextStr) : {};
  // 执行数据库查询
}

4. 优化服务端组件的props传递（保底方案） #

如果以上方法都不适用，必须手动传递上下文，可以在顶层服务端组件获取上下文后，通过props批量传递给子组件，避免多层嵌套传递的繁琐：

// 顶层服务端组件
async function RootServerComponent() {
  const appContext = await getServerAppContext();
  return (
    <div>
      <ChildComponent appContext={appContext} />
      <AnotherChildComponent appContext={appContext} />
    </div>
  );
}

// 子服务端组件
async function ChildComponent({ appContext }) {
  const data = await db.query('SELECT ...', [appContext.userId]);
  return <div>{data}</div>;
}

关于你提供的客户端Context代码 #

你写的AppProvider和useAppContext是纯客户端的上下文实现，只能在客户端组件里使用。如果你的数据库查询是在服务端执行的，这个上下文完全用不上；如果是客户端发起的请求（比如浏览器端fetch），可以在客户端组件里用useAppContext拿到上下文后再传给fetch，但这属于客户端请求，不是服务端渲染时的查询。

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