react-cache-buster始终提示无新版本，如何实现版本检测与自动重载？

AI 小北

2026-6-29

关于react-cache-buster无法自动检测版本更新的问题

已按照react-cache-buster简易指南操作：构建后根目录生成带版本号的meta.json文件，按要求用CacheBuster Provider包裹应用。测试时先部署0.1.0版本，再升级至0.1.2版本重新部署，但加载站点时始终显示There is no new version. No cache refresh needed.。暂未尝试手动检查，请问还需配置什么才能让它在启动时检测版本变更并自动重载？

代码如下：

export const App = () => {
  return (
    <>
      <CacheBuster
        currentVersion={version}
        isEnabled={true}
        isVerboseMode={true}
      >
      <RouterProvider 
        router={router}
      />
      </CacheBuster>
    </>
  );
}

解决方案

禁止meta.json被缓存：服务器必须给meta.json设置禁止缓存的响应头，比如Cache-Control: no-cache, no-store, must-revalidate。浏览器如果缓存了旧的meta.json，就会一直拿旧版本号和当前版本对比，自然检测不到更新。
对齐currentVersion的取值：代码里的version变量必须和meta.json里的版本号完全一致，最好直接从package.json读取，比如import { version } from '../package.json'，避免手动输入出错。

配置自动重载回调：默认检测到新版本不会自动重载，需要添加onNewVersionAvailable回调触发页面刷新：

const handleNewVersion = () => {
  window.location.reload(true);
};

// 更新CacheBuster组件
<CacheBuster
  currentVersion={version}
  isEnabled={true}
  isVerboseMode={true}
  onNewVersionAvailable={handleNewVersion}
>

指定meta.json的正确路径：如果应用部署在子路径下，要通过metaFileDirectory属性设置meta.json的所在路径，比如metaFileDirectory='/my-app/'，确保组件能正确获取到文件。
添加定时检测（可选）：如果需要更及时的检测，可以设置checkInterval属性，比如checkInterval={60000}（每分钟检测一次），避免仅初始化时检测一次的遗漏。