Next.js 13部署Vercel后数据不更新，设置cache: 'no-store'仍无效

问题说明 #

Feed组件本地构建测试时运行正常，但部署到Vercel后无法获取API端点的最新数据。已在fetch请求中添加cache: 'no-store'配置，问题仍未解决。相关代码片段：

"use client";

const fetchPosts = async () => {
  const response = await fetch("/api/prompt", {
    cache: 'no-store',
  });
  const data = await response.json();
  setAllPosts(data);
};

useEffect(() => {
  fetchPosts();
}, []);

可行解决方案 #

• 强制API路由禁用缓存：如果/api/prompt是Next.js API路由，仅前端设置fetch缓存规则不足以绕过Vercel边缘缓存，需在后端响应中明确设置缓存控制头：

  export async function GET() {
    // 数据获取逻辑
    return new Response(JSON.stringify(yourData), {
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0',
      },
    });
  }
  

  若使用App Router，可直接在路由文件顶部添加export const revalidate = 0;实现禁用缓存。

• URL追加时间戳参数：在请求URL后添加随机时间戳，强制每个请求被视为新请求，绕过所有层级缓存：

  const response = await fetch(`/api/prompt?_=${Date.now()}`, {
    cache: 'no-store',
  });
  

• 调整Vercel项目缓存策略：进入Vercel项目后台，在「Settings」->「Edge Network」->「Cache Rules」中，为/api/*路径创建自定义规则，设置「Cache Level」为「No Cache」，确保边缘节点不缓存API响应。

• 确保页面动态渲染：若组件所在页面为静态生成，初始数据可能过时。可在页面级别添加export const dynamic = "force-dynamic";（App Router）或使用getServerSideProps（Pages Router），确保页面每次请求都重新渲染。

内容的提问来源于stack exchange，提问作者Waqas Khalid Obeidy