如何让加载过旧版本的用户获取Netlify部署的最新版ReactJS应用

1. 调整Netlify缓存配置 #

这是最核心的配置，从CDN层面避免旧资源被长期缓存：

• 在项目根目录新建_headers文件，添加以下规则：

/*
  Cache-Control: public, max-age=0, must-revalidate
/static/*
  Cache-Control: public, max-age=31536000, immutable

• 规则逻辑说明：React打包后的入口index.html文件不带hash后缀，配置为每次都从服务器拉取最新版本；static目录下的JS/CSS/图片等资源都带唯一hash，新版本部署后hash会自动变更，因此可以设置一年的长期缓存，既不影响版本更新，也能提升加载速度。

2. React应用内添加版本检测逻辑 #

针对已经打开页面、还没触发重新请求HTML的在线用户，可以通过主动检测提醒更新：

• 打包时注入版本标识：在项目的环境变量中新增REACT_APP_BUILD_VERSION，值可以设置为部署时间戳或者最新commit哈希，每次构建会自动生成新版本号。
• 版本校验逻辑实现：可以选择轮询或者路由触发两种方式：
  • 低频率轮询：应用启动后每10-30分钟请求一次根路径的index.html，提取最新的版本号和本地存储的旧版本号对比
  • 路由触发：用户每次切换主路由时触发一次版本校验，对用户体验无影响
• 检测到更新后的处理：弹出非阻断式提示告知用户有新版本可用，用户确认后调用window.location.reload(true)强制跳过本地缓存刷新页面，不要静默刷新，避免丢失用户未保存的操作内容。

3. 特殊场景适配 #

• 如果你的应用开启了PWA Service Worker：需要额外配置SW的更新检测逻辑，每次部署后SW会自动识别新的资源版本，检测到更新后同样提示用户刷新激活新版本即可。
• Netlify默认已经支持部署后自动清除CDN缓存，不需要额外手动操作清除旧资源。

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