动态导入是唯一安全机制，因next/headers纯服务端依赖Node.js上下文，静态import无法按条件跳过，会致构建失败；动态导入在运行时按需加载，确保服务端逻辑不进入客户端包。
在 Next.js 13+ 的 App Router 中，动态导入（import()）是唯一能在服务端渲染（SSR）与客户端共存环境下安全读取服务端上下文（如 Cookie、Headers）的机制。关键在于：它绕过了 ES 模块顶层静态 import 的限制，让服务端逻辑只在服务端执行，不污染客户端包。
为什么不能直接 import next/headers
next/headers 是纯服务端模块，依赖 Node.js 请求生命周期和 Headers 实例。一旦出现在 Client Component 或其调用链中（哪怕加了 typeof window === "undefined" 判断），Webpack/Turbopack 在构建时就会报错：
"You're importing a component that needs next/headers. That only works in a Server Component"。
因为 import 语句必须在模块顶层静态解析，无法按运行时条件跳过。
动态导入的正确写法
把服务端逻辑封装进一个异步函数，并在其中动态导入 next/headers。这样模块只在服务端调用时加载，不会被打包进客户端代码：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在 Server Component 或 Server Action 中调用该函数
- 函数内部用
const { cookies } = await import('next/headers') - 确保该函数不被 Client Component 直接或间接引用（例如不要 export 给 client 使用）
实际封装示例：带 token 的 fetch
以下是一个生产可用的 myFetch 封装，自动注入 auth token：
立即学习“Java免费学习笔记（深入）”；
- 服务端调用时，动态导入
next/headers并读取cookies().get('authtoken')?.value - 客户端调用时，从
document.cookie解析或 localStorage 读取（需自行实现） - 类型安全，泛型支持返回值推导
注意事项
动态导入不是万能解药，需注意几点：
- 不能在 Client Component 的顶层 await 动态导入结果（会破坏 React Server Components 渲染流）
- 推荐将动态导入逻辑放在 Server Component 内部、Server Action 或
route.ts中 - 若需在客户端触发服务端读取 cookie，应通过 Server Action 提交表单或调用 API 路由，而非尝试在浏览器里“模拟”服务端行为
