Next.js是否支持Back/Forward Cache？实际使用遇加载异常问题

以下是几个排查和解决的关键点：

• 检查unload/beforeunload事件监听：
  bfcache会自动排除添加了这两个事件监听的页面，哪怕测试工具显示成功，实际导航时也不会命中缓存。排查全局或页面内的代码，包括第三方依赖，确保没有注册这类监听。可以通过Chrome DevTools的Performance面板录制导航流程，查看是否有unload相关的执行标记。

• 确保使用客户端路由跳转：
  只有通过next/link或next/router进行的客户端导航，才会触发bfcache逻辑。如果用了原生<a>标签、target="_blank"或者手动触发的硬跳转，浏览器会重新加载页面，不会使用缓存。检查跳转代码，确认是Next.js优化后的客户端导航。

• 区分bfcache恢复与首次加载的API请求：
  即使页面从bfcache恢复，组件的useEffect（无依赖项）仍会执行，导致重复发起API请求。可以通过pageshow事件的persisted属性判断是否来自bfcache，跳过不必要的请求：

  useEffect(() => {
    const handlePageShow = (e) => {
      if (!e.persisted) {
        // 仅在非bfcache恢复时请求数据
        fetchYourData();
      }
    };
  
    window.addEventListener('pageshow', handlePageShow);
    return () => window.removeEventListener('pageshow', handlePageShow);
  }, []);
  

• 排查第三方脚本干扰：
  广告、统计类第三方脚本常偷偷添加unload监听或修改页面状态，破坏bfcache。可以临时移除这类脚本测试，确认是否是它们导致的问题。

• 验证实际bfcache状态：
  不要只依赖测试工具的提示，打开Chrome DevTools的Application > Cache > Back/forward cache查看当前页面是否被缓存；或者用Performance面板录制返回导航，检查是否出现Restore from back-forward cache的标记，确认实际命中情况。

• 检查Next.js及依赖的缓存策略：
  部分数据缓存库（如SWR、React Query）默认会在页面恢复时重新验证数据，可通过配置跳过：比如SWR设置revalidateOnFocus: false，或结合persisted状态控制重新验证逻辑。同时确保next.config.js中没有禁用bfcache的实验性配置。

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