ReactJS+Dot Net Core技术栈生产环境更新代码需硬刷新才生效如何解决？

该问题本质是静态资源缓存策略配置不合理导致：前端打包后的静态资源（JS、CSS、HTML文件）被浏览器/CDN/服务器设置了过长的强缓存时间，普通刷新时浏览器会直接读取本地缓存的旧资源，只有硬刷新会忽略强缓存请求服务端最新资源。

1. React前端打包侧配置（优先配置） #

• 打包时给非HTML的静态资源（JS、CSS、图片等）加上哈希后缀，目前主流的React脚手架（Create React App、Vite）默认已经支持该配置，只要没有手动关闭哈希功能，每次打包变更内容的资源会生成不同的哈希值，文件名完全不同，自然不会命中旧缓存
• 对入口index.html文件配置禁止强缓存，必须每次请求服务端拿最新的html内容，html里引用的带哈希的资源如果有更新会自动加载新的，没更新就复用旧缓存
  如果使用Create React App默认打包配置无需额外调整，Vite项目确认vite.config.ts中没有手动关闭资源哈希配置即可。

2. .NET Core后端静态资源缓存配置 #

如果你的.NET Core服务同时托管React的静态资源，需要在Program.cs里调整静态资源的缓存头配置：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        // 对index.html设置不缓存
        if (ctx.File.Name.Equals("index.html", StringComparison.OrdinalIgnoreCase))
        {
            ctx.Context.Response.Headers.CacheControl = "no-cache, no-store, must-revalidate";
            ctx.Context.Response.Headers.Pragma = "no-cache";
            ctx.Context.Response.Headers.Expires = "0";
        }
        // 其他带哈希的静态资源设置30天强缓存
        else
        {
            ctx.Context.Response.Headers.CacheControl = "public, max-age=2592000";
        }
    }
});

• 若前端资源托管在CDN上，需要同步在CDN控制台配置index.html的缓存策略为不缓存，其他带哈希的静态资源缓存30天以上即可。

3. 运行时主动检测更新（可选，适配单页应用长时间不关闭的场景） #

如果你的用户会长期停留在页面不刷新，可以增加版本检测逻辑，主动提示用户更新：

• 前端项目根目录新增version.json文件，每次打包时自动写入当前的版本号/打包时间戳
• 前端路由切换或者定时（比如每10分钟）请求/version.json，拿到最新的版本号和本地存储的旧版本号对比，如果不一致就弹提示引导用户点击刷新，代码示例：

// 版本检测逻辑
const checkVersion = async () => {
  const res = await fetch('/version.json?t=' + Date.now(), { cache: 'no-cache' });
  const latestVersion = (await res.json()).version;
  const localVersion = localStorage.getItem('app_version');
  
  if (!localVersion) {
    localStorage.setItem('app_version', latestVersion);
    return;
  }
  
  if (latestVersion !== localVersion) {
    if (confirm('系统已更新，点击确定刷新页面获取最新版本')) {
      localStorage.setItem('app_version', latestVersion);
      window.location.reload();
    }
  }
}

// 每10分钟检测一次
setInterval(checkVersion, 10 * 60 * 1000);
// 路由切换时也触发检测，根据你使用的路由库调整对应逻辑
router.afterEach(() => checkVersion());

• 可通过打包插件自动更新version.json的版本号，不需要手动修改。

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