NextJS 13始终显示API返回旧数据，如何彻底禁用缓存？

针对你遇到的页面显示旧数据、无法实时同步数据库更新的问题，结合你的技术栈（Next.js 13 + Prisma + NeonDB），可以通过以下全链路配置彻底禁用缓存：

1. 页面组件层面：强制动态渲染 #

在page.tsx顶层添加以下导出，确保页面每次请求都重新生成，完全禁用静态缓存和ISR：

export const dynamic = 'force-dynamic'; // 强制每次请求执行服务器组件逻辑
export const revalidate = 0; // 禁用增量静态再生缓存
export const fetchCache = 'force-no-store'; // 禁用页面内所有fetch请求的缓存

注意：这些配置仅对服务器组件生效，若页面包含客户端组件，需确保客户端组件的数据获取不依赖缓存。

2. API路由层面：禁用请求与响应缓存 #

在所有API路由的route.ts中，不仅要给内部请求设置cache: 'no-store'，还要返回明确的缓存控制响应头，防止CDN或浏览器缓存：

export async function GET(request: Request) {
  // 直接查询Prisma时，默认无查询缓存；若用Accelerate需额外配置
  const data = await prisma.yourModel.findMany();

  return new Response(JSON.stringify(data), {
    headers: {
      'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0',
    },
  });
}

如果使用了Prisma Accelerate，需在查询时显式禁用缓存：

const data = await prisma.yourModel.findMany({
  cacheStrategy: { ttl: 0 }, // 完全禁用Accelerate的查询缓存
});

3. Vercel全局缓存配置 #

完善vercel.json，确保所有路径（页面、API）都应用严格的缓存控制规则：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-store, no-cache, must-revalidate, proxy-revalidate"
        },
        {
          "key": "Pragma",
          "value": "no-cache"
        },
        {
          "key": "Expires",
          "value": "0"
        }
      ]
    }
  ]
}

该配置会覆盖Vercel边缘节点的缓存策略，确保不会留存任何旧数据。

4. 数据更新后的缓存刷新 #

数据更新完成后，优先使用服务器端的缓存失效API，比客户端router.refresh()更可靠：

• 若用服务器组件处理表单提交（App Router），用revalidatePath强制刷新对应路径的缓存：

  import { revalidatePath } from 'next/cache';
  import { redirect } from 'next/navigation';
  
  export async function POST(request: Request) {
    // 执行数据更新逻辑
    await prisma.yourModel.update({
      where: { id: ... },
      data: { ... },
    });
    // 重新验证目标页面缓存，强制刷新
    revalidatePath('/your-target-page');
    // 重定向回页面
    redirect('/your-target-page');
  }
  

• 若在客户端组件中更新数据，确保router.refresh()在请求成功后调用：

  'use client';
  import { useRouter } from 'next/navigation';
  
  const updateData = async () => {
    const res = await fetch('/api/update-data', {
      method: 'POST',
      body: JSON.stringify(updatedData),
      headers: { 'Content-Type': 'application/json' },
    });
    if (res.ok) {
      router.refresh();
    }
  };
  

关键说明 #

你之前通过添加request参数能获取最新数据，本质是绕过了Next.js基于请求URL的缓存键规则。上述配置从页面渲染、API响应、CDN缓存、数据库查询四个层面彻底禁用了缓存，确保每次请求都拉取最新数据。

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