React生产环境隐身模式跳转外部站返回页面未刷新问题

1. 核心诱因：浏览器往返缓存（bfcache）的隐身模式行为差异 #

bfcache是浏览器为前进/后退导航做的性能优化，会将离开页面时的完整DOM、JS堆内存、组件状态做冻结快照存在内存中，用户点击返回时直接从内存恢复快照，不会重新执行HTML解析、JS资源加载、应用初始化流程，页面状态会和离开时完全一致。
Chrome、Firefox的生产环境隐身模式对bfcache的触发规则和其他场景存在明确差异：

• 普通浏览模式、开发环境下，只要页面存在未完成的网络请求、注册了未卸载的事件监听、开启了HMR热更新/React DevTools等注入脚本，浏览器会自动禁用bfcache，返回时会重新加载页面
• 生产环境隐身模式下，浏览器为了减少磁盘写入、降低用户痕迹留存优先级，会放宽bfcache的准入阈值，即使存在常规会阻塞bfcache的条件，也大概率会命中内存快照缓存，这是该问题仅在特定场景复现的核心原因。

2. React本身不存在相关特殊运行机制 #

React没有内置跨导航保留状态、跳过重新渲染的逻辑。只要页面执行完整的卸载、重新初始化流程，React会从头完成根节点挂载、组件执行、状态初始化的全流程，不会主动保留上一次访问的状态。你观察到的状态留存现象，本质是浏览器从bfcache恢复页面时，React运行时本身也被完整冻结恢复了，根本没有触发重走初始化流程，和React框架本身的设计无关。

3. AWS Amplify默认配置会提升bfcache命中概率 #

Amplify静态托管的默认配置没有做bfcache相关的限制，会放大该问题：

• 默认给静态HTML返回的缓存头没有强制no-store标记，浏览器会判定该页面适合做bfcache快照
• 适配SPA路由的全路径重写规则（将所有路径重定向到index.html）默认不携带禁用bfcache的响应头，会进一步提升隐身模式下的bfcache命中概率。

• 在应用入口最顶部添加bfcache恢复检测逻辑，从缓存恢复时主动触发刷新：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    window.location.reload()
  }
})

pageshow事件会在页面每次加载（包括从bfcache恢复）时触发，event.persisted为true时即代表页面来自往返缓存，此时执行硬刷新即可让React应用重新走完整初始化流程。

• 修改Amplify自定义响应头配置：进入应用托管设置的自定义头配置页，给所有路径的HTML响应添加两个头：
  • Cache-Control: no-store
  • Permissions-Policy: bfcache=()
    明确告知浏览器不要对该页面启用往返缓存。
• 跨站跳转前可以在sessionStorage写入跳转标记，返回时通过pageshow事件检测标记，按需重置React根节点状态，不需要全量刷新也能实现状态一致性。

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