Vercel部署的Next.js 14数据获取无法自动更新问题求助

问题分析 #

你遇到的核心问题是：Next.js 14的Server Component在Vercel生产环境中默认会对fetch请求的数据做静态缓存，导致API数据更新后页面无法自动同步。虽然你设置了Cache-Control: no-cache，但Next.js对Server Component的fetch有专属缓存控制逻辑，这个请求头会被框架或Vercel的缓存层覆盖，因此未生效。

解决方案 #

直接使用Next.js为fetch提供的专属缓存配置，优先级高于请求头的Cache-Control，以下是两种适配你场景的方案：

方式1：完全禁用缓存（每次请求拉取最新数据） #

修改/src/lib/data.js中的FetchPluvis函数，给fetch添加cache: 'no-store'选项：

export async function FetchPluvis() {
  const url = 'https://api-acua-production.up.railway.app/Api/pluvis'
  const response = await fetch(url, {
    cache: 'no-store', // 强制每次请求都拉取最新数据
  })
  const data = await response.json()
  return data
}

这种方式适合需要实时获取最新数据的场景，但会增加API请求量。

方式2：设置定时重新验证（匹配API24小时更新频率） #

如果API数据固定24小时更新一次，推荐用增量静态再生（ISR），设置next.revalidate让Vercel自动定时刷新缓存：

export async function FetchPluvis() {
  const url = 'https://api-acua-production.up.railway.app/Api/pluvis'
  const response = await fetch(url, {
    next: {
      revalidate: 86400, // 24小时（单位：秒）后自动重新验证缓存
    },
  })
  const data = await response.json()
  return data
}

这种方式兼顾性能和数据新鲜度，Vercel会在后台自动更新缓存，用户访问时会拿到最新数据。

快速验证方法 #

如果修改后需要立即测试，无需等待24小时：

• 在Vercel控制台找到你的项目，手动触发「重新部署」并勾选「清除构建缓存」
• 访问页面时添加?refresh=true参数，Next.js会强制刷新缓存

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