Next.js v13.2 app目录API部署Vercel后缓存致数据不更新求助

核心原因 #

Next.js 13+的app目录Route Handler默认会对GET请求进行静态缓存，部署到Vercel后会触发边缘缓存，导致重复请求返回相同旧数据。以下是针对性解决方法：

1. 强制禁用路由缓存 #

这是最直接的解决方案，有两种实现方式：

• 通过响应头禁用缓存：在返回Response时设置Cache-Control头，明确告知Vercel和客户端不缓存：

  export async function GET() {
    // 数据库查询逻辑
    const data = await fetchDatabaseData();
    return new Response(JSON.stringify(data), {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-store, max-age=0',
      },
    });
  }
  

• 通过路由配置禁用缓存：在路由文件顶部添加dynamic配置，强制每次请求都执行路由逻辑：

  // 强制动态路由，禁用所有缓存
  export const dynamic = 'force-dynamic';
  
  export async function GET() {
    const data = await fetchDatabaseData();
    return Response.json(data);
  }
  

2. 检查Vercel边缘缓存配置 #

如果上述方法无效，登录Vercel控制台，进入项目的Settings > Functions > Edge Cache，确认是否为/api/someData路径设置了自定义缓存规则。如有，直接删除或调整为遵循响应头的缓存策略。

3. 排查数据获取逻辑的本地缓存 #

确保你的数据库查询代码没有自带缓存：

• 使用ORM（如Prisma、TypeORM）时，检查是否开启了查询缓存，如有则关闭；
• 确认数据库客户端没有启用本地缓存机制，避免每次请求读取缓存而非实时查询数据库。

4. 增量静态再生（ISR）（适合非实时场景） #

如果业务允许数据延迟更新，可以使用ISR定期刷新缓存，兼顾性能和数据新鲜度：

// 每60秒重新生成一次数据（可根据需求调整时间）
export const revalidate = 60;

export async function GET() {
  const data = await fetchDatabaseData();
  return Response.json(data);
}

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