Vercel部署缓存问题：客户端始终显示旧版本网站

以下是针对Vercel部署后浏览器缓存导致用户无法看到新版本的实用解决方案，按优先级从高到低排序：

1. 配置精准的缓存控制头 #

通过vercel.json给不同类型资源设置差异化缓存策略，这是最根本的解决办法：

• 带内容哈希的静态资源（如构建生成的main.abc123.js）设置永久缓存，因为内容变更时哈希会自动更新，URL变了浏览器自然会拉新；
• HTML入口文件和无哈希的资源设置强制验证，确保每次请求都检查最新版本。

示例vercel.json配置：

{
  "headers": [
    {
      "source": "/(.*\\.(js|css|png|jpg|svg|woff2))$",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    }
  ]
}

2. 确保构建工具生成带哈希的资源文件名 #

检查你的构建工具（Webpack/Vite/Next.js等）是否开启了内容哈希功能，这是缓存策略生效的前提：

• Vite配置示例：

  export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          assetFileNames: '[name].[hash].[ext]',
          chunkFileNames: '[name].[hash].js',
          entryFileNames: '[name].[hash].js'
        }
      }
    }
  })
  

• Webpack配置示例：

  module.exports = {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].chunk.js',
      assetModuleFilename: 'assets/[name].[contenthash][ext]'
    }
  }
  

3. 启用增量静态再生（ISR）（Next.js项目专属） #

如果是Next.js静态站点，在getStaticProps里设置revalidate参数，让页面定期自动更新，同时保留缓存优势：

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60 // 每60秒重新生成页面
  }
}

也可以通过Vercel Dashboard或API手动触发特定页面的重新验证，强制刷新内容。

4. 给资源引用添加版本号（临时应急方案） #

如果暂时无法调整构建或缓存配置，手动给HTML里的资源引用加版本参数，每次部署更新版本号：

<script src="/app.js?v=202405201230"></script>
<link rel="stylesheet" href="/style.css?v=202405201230">

更高效的方式是用Vercel提供的环境变量自动注入Git提交哈希作为版本号：

<script src="/app.js?v=<%= process.env.VERCEL_GIT_COMMIT_SHA %>"></script>

5. 禁用边缘缓存（极端情况） #

如果以上方法都无效，可临时禁用Vercel的边缘缓存，但这会影响站点性能，仅作为最后手段：

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

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