如何关闭Next.js数据缓存？生产环境外部API无法获取最新数据

在Next.js生产环境中，fetch请求的缓存机制会优先遵循框架自身的配置，你之前设置的Cache-Control: no-cache请求头和next.tags未生效的原因主要有两点：

• Next.js生产环境默认对fetch请求启用force-cache策略，请求头的缓存指令可能被框架覆盖
• next.tags只是给缓存打标记，不会自动触发重验证，必须主动调用重验证方法才会更新缓存

以下是几种可行的解决方案：

1. 彻底禁用缓存（实时获取最新数据） #

使用fetch标准的cache: 'no-store'选项，强制Next.js不缓存任何请求结果：

const response = await fetch(url, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
  cache: 'no-store', // 禁用所有缓存，每次请求都拉取最新数据
});

2. 设置自动短周期重验证 #

如果不需要完全实时，可设置next.revalidate指定缓存有效期，到期后自动重新请求：

const response = await fetch(url, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
  next: { revalidate: 1 }, // 缓存1秒后自动失效，重新请求
});

3. 按需触发重验证（适合数据更新后主动刷新） #

保留next.tags标记缓存，然后在数据更新完成后主动调用revalidateTag清除对应缓存：
首先在fetch请求中标记tag：

const response = await fetch(url, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
  next: { tags: ['revalidate'] },
});

然后在处理数据更新的逻辑中（仅能在Server Component或API路由中调用）触发重验证：

import { revalidateTag } from 'next/cache';

async function handleDataUpdate() {
  // 执行数据更新操作（比如调用外部API更新数据库）
  await updateExternalData();
  // 清除标记为'revalidate'的缓存，下次请求会拉取最新数据
  await revalidateTag('revalidate');
}

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