在 Next.js 13+ App Router 中，直接在 fetch 选项中使用 cache: 'no-store' 可能因 SSR 环境限制或配置位置错误而报错；应将缓存控制参数（如 next: { revalidate: 0 } 或 next: { cache: 'no-store' }）作为顶层 fetch 配置项传入，而非嵌套在 headers 或 method 中。
在 next.js 13+ app router 中，直接在 `fetch` 选项中使用 `cache: 'no-store'` 可能因 ssr 环境限制或配置位置错误而报错；应将缓存控制参数（如 `next: { revalidate: 0 }` 或 `next: { cache: 'no-store' }`）作为顶层 fetch 配置项传入，而非嵌套在 headers 或 method 中。
Next.js 13 引入了全新的数据获取缓存模型，其 fetch 行为默认启用服务端缓存（包括静态生成与增量静态再生），这虽提升性能，但也导致开发时数据“不实时”——即使后端 Strapi 数据已更新，前端仍返回旧快照。你遇到的 cache: 'no-store' 报错，根本原因在于 该选项未被正确放置在 fetch 的顶层配置对象中，或在不支持的上下文中误用（例如在客户端组件中调用服务端 fetch 且未标注 'use server'）。
✅ 正确写法：cache 和 revalidate 必须作为 fetch 第二个参数（即 options）的直接属性，且需置于 next 对象内：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
async function getData() {
const res = await fetch('http://127.0.0.1:1337/api/posts', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer your-jwt-token-here',
},
// ✅ 正确：next 是顶层 key，cache 是其子属性
next: {
cache: 'no-store' // 完全禁用缓存（SSR 每次重新请求）
// 或 revalidate: 0 // 启用 ISR，但立即过期（等效于每次刷新验证）
}
});
if (!res.ok) throw new Error('Failed to fetch data');
return res.json();
}⚠️ 常见错误排查：
- ❌ cache: 'no-store' 写在 headers 或 method 同级但未包裹在 next: { ... } 中 → Next.js 忽略并回退至默认缓存，或抛出类型错误；
- ❌ 在客户端组件（Client Component）中直接调用该服务端函数 → 触发 hydration 不一致或 fetch 权限错误；
- ❌ 使用 useEffect + fetch（无 async Server Component）→ 客户端 fetch 无法识别 next 配置，该配置仅在服务端有效。
? 推荐工程化封装（参考 Strapi 官方 Starter）： 为统一管理缓存策略与错误处理，建议封装 fetchAPI 工具函数：
// lib/fetchAPI.ts
import { getStrapiURL } from './api-helpers';
export async function fetchAPI(path: string, options: RequestInit = {}) {
const url = getStrapiURL(`/api${path}`);
// 默认禁用缓存；生产环境可按需设 revalidate: 60
const config: RequestInit = {
next: { cache: 'no-store' }, // ✅ 强制每次服务端重取
headers: {
'Content-Type': 'application/json',
...options.headers,
},
...options,
};
const res = await fetch(url, config);
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
return res.json();
}
// 在 Server Component 中使用
export default async function Page() {
const posts = await fetchAPI('/posts'); // 自动应用 no-store
return <div>{JSON.stringify(posts)}</div>;
}? 总结：
- cache: 'no-store' 和 revalidate 等 Next.js 特有缓存指令，必须通过 next: { ... } 对象传入 fetch；
- 它们仅在服务端组件（Server Component）或服务端函数（如 generateMetadata）中生效；
- 开发阶段推荐 next: { cache: 'no-store' } 确保数据新鲜度；上线后可根据业务权衡 revalidate: N 实现性能与实时性平衡。
