NextJS(13.2.4)部署Vercel后fetch请求缓存无法更新求助

• 先排查服务端路由的缓存策略：
  客户端fetch加cache: "no-store"没用，大概率是**/app目录下的目标路由本身被缓存了**。NextJS 13的App Router默认会缓存服务器组件的fetch响应，Vercel还会叠加边缘缓存。解决办法：

  • 在目标路由的API处理函数里，给第三方请求和响应都加上缓存控制：

    // app/目标路由路径/route.js
    export async function GET() {
      // 调用第三方API时禁用缓存
      const thirdPartyRes = await fetch('第三方服务地址', { cache: "no-store" });
      const data = await thirdPartyRes.json();
      // 返回响应时强制浏览器和边缘节点不缓存
      return Response.json(data, {
        headers: {
          'Cache-Control': 'no-store, max-age=0',
          'Pragma': 'no-cache',
          'Expires': '0'
        }
      });
    }
    

  • 或者直接在路由文件顶部添加全局缓存控制，让该路由每次请求都重新渲染：

    // app/目标路由路径/route.js
    export const revalidate = 0; // 等同于no-store
    
    export async function GET() {
      const res = await fetch('第三方服务地址');
      const data = await res.json();
      return Response.json(data);
    }
    

• 强化客户端请求的缓存控制：
  除了cache: "no-store"，手动添加请求头彻底禁用浏览器缓存：

  // 'use client'组件内的fetch代码
  const fetchLatestData = async () => {
    const res = await fetch('/app/目标路由路径', {
      cache: "no-store",
      headers: {
        'Cache-Control': 'no-store, max-age=0',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    });
    const data = await res.json();
    // 处理数据逻辑
  };
  

• 配置Vercel全局路由缓存规则：
  如果上面的设置还是不生效，直接在项目根目录的vercel.json里添加路由规则，强制目标路径不缓存：

  {
    "routes": [
      {
        "src": "/app/目标路由路径(.*)",
        "headers": {
          "Cache-Control": "no-store, max-age=0"
        }
      }
    ]
  }
  

• 验证缓存是否失效：
  打开浏览器开发者工具→Network标签，发起请求后查看：

  • Response Headers里的Cache-Control是否为no-store, max-age=0
  • Size列是否显示为正常的请求大小，而非from disk cache或from memory cache

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