如何在Next.js中共享请求级别的服务端状态？

方案1：提前获取异步请求数据，传递给同步函数 #

这是最直接的适配方式——既然第三方API要求同步回调，就把需要的请求数据（如Host、请求ID）在异步上下文（服务器组件、API路由）中提前获取，再作为参数传入同步函数，避免在同步函数内部调用异步的headers()/cookies()。

示例代码：

// 服务器组件/API路由中异步预取数据
async function Page() {
  const headersList = await headers();
  const host = headersList.get('host');
  const requestId = headersList.get('x-request-id');

  // 将预取的数据传给同步回调
  const customerSlug = combine(() => getCustomerSlugSync(host, requestId));
  // 后续业务逻辑...
}

// 同步函数，直接使用传入的请求数据
function getCustomerSlugSync(host: string | null, requestId: string | null) {
  // 处理逻辑
  return generatedSlug;
}

方案2：改进AsyncLocalStorage的使用方式 #

之前用中间件启动ALS失败，是因为Next.js中间件不等待路由响应，但可以在根layout/page服务器组件中启动ALS上下文——服务器组件本身支持异步执行，能先获取请求数据，再通过ALS.run包裹子组件渲染，确保所有子组件内的同步函数都能访问到请求上下文。

步骤：

1. 创建ALS实例：

// lib/async-local-storage.ts
import { AsyncLocalStorage } from 'node:async_hooks';

type RequestContext = {
  host: string | null;
  requestId: string | null;
};

export const als = new AsyncLocalStorage<RequestContext>();

2. 在根layout中初始化ALS：

// app/layout.tsx
import { als } from '@/lib/async-local-storage';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const headersList = await headers();
  const context = {
    host: headersList.get('host'),
    requestId: headersList.get('x-request-id'),
  };

  // 用ALS包裹子组件，确保后续所有同步代码能访问上下文
  return als.run(context, () => (
    <html lang="en">
      <body>{children}</body>
    </html>
  ));
}

3. 在同步函数中获取上下文：

function getCustomerSlug() {
  const context = als.getStore();
  if (!context) throw new Error('请求上下文未初始化');
  
  const { host } = context;
  // 处理逻辑
  return generatedSlug;
}

// 直接调用同步函数即可
combine(getCustomerSlug);

该方案只需在根layout处理一次，即可覆盖整个请求生命周期，无需给每个路由单独配置。

方案3：利用API路由的Request对象同步访问headers #

如果是在API路由中，直接使用传入的Request实例可以同步访问headers，不需要调用异步的headers()函数：

// app/api/route.ts
import { combine } from 'third-party-lib';

export async function GET(request: Request) {
  // 同步访问request.headers
  const host = request.headers.get('host');
  const requestId = request.headers.get('x-request-id');

  const slug = combine(() => getCustomerSlugSync(host, requestId));
  // 后续响应逻辑
  return Response.json({ slug });
}

避坑提醒 #

• 禁止使用全局变量或全局Map存储请求数据：Next.js多请求并发处理，全局变量会导致数据污染，全局Map无法可靠清理，最终引发内存泄漏。
• 不要在中间件中依赖ALS：Next.js中间件是独立执行流程，不会等待后续路由处理完成，无法保证ALS上下文覆盖整个请求生命周期。

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