Next.js 14缓存Fetch问题：开发模式需获取Contentful新数据

1. 优先设置fetch的cache选项（Next.js专属方案） #

Next.js的fetch API自带缓存控制逻辑，优先级比请求头更高。你之前只修改了请求头，但没覆盖Next.js的默认缓存策略，所以没生效。在开发模式下显式设置cache: 'no-store'，能强制每次请求都从Contentful拉取最新数据。

修改你的fetch配置代码：

const fetchOptions = process.env.NEXT_PUBLIC_DEVMODE === "true"
  ? {
      cache: 'no-store', // 核心：禁用Next.js的fetch缓存
      headers: {
        "Cache-Control": "no-cache, no-store, must-revalidate",
        Pragma: "no-cache",
        Expires: "0",
      },
    }
  : {
      // 生产环境可按需设置缓存策略，比如缓存1天
      next: { revalidate: 86400 }
    };

// 调用fetch时传入配置
const response = await fetch(你的ContentfulAPI地址, fetchOptions);

2. 追加随机参数绕过CDN缓存 #

如果Contentful的CDN仍在缓存请求，给API URL加个时间戳参数，确保每次请求的URL唯一，彻底绕过CDN缓存：

const apiUrl = process.env.NEXT_PUBLIC_DEVMODE === "true"
  ? `${你的ContentfulAPI地址}?t=${Date.now()}`
  : 你的ContentfulAPI地址;

const response = await fetch(apiUrl, fetchOptions);

3. 验证环境变量是否生效 #

先确认NEXT_PUBLIC_DEVMODE在开发模式下确实是"true"，可以临时加日志验证：

console.log('当前是否为开发模式:', process.env.NEXT_PUBLIC_DEVMODE);

如果变量没生效，检查.env.development文件的配置，然后重启Next.js服务加载新环境变量。

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