Nuxt+Vercel站点Lighthouse检测到回退/前进缓存恢复受阻问题求助

针对你遇到的“Page prevented back/forward cache restoration”问题，除已尝试的方案，可从以下方向排查解决：

• 排查第三方脚本干扰
  线上引入的统计、广告、客服类第三方脚本，常因注册beforeunload事件、修改页面状态或执行同步请求，直接阻止bfcache恢复。建议逐一禁用这类脚本，测试是否恢复正常。找到问题脚本后，可更换替代工具，或调整加载逻辑：比如在页面visibilitychange事件触发后再初始化脚本，或通过pageshow事件判断是否从bfcache恢复，避免干扰缓存机制。

• 检查Nuxt插件/自定义脚本的副作用

  • 确认是否有插件或自定义代码注册了beforeunload、unload事件，这类事件会直接破坏bfcache。如需监听页面卸载，改用pagehide事件，并通过event.persisted属性判断是否为bfcache缓存场景：

    window.addEventListener('pagehide', (event) => {
      if (!event.persisted) {
        // 仅在页面真正卸载时执行逻辑
      }
    });
    

  • 避免在页面卸载阶段修改DOM、清除全局变量或发送同步请求，这类操作会导致浏览器放弃缓存页面。

• 调整缓存配置（更精准的规则）
  之前设置no-store过于粗暴，可尝试针对HTML页面设置更合理的HTTP缓存头，在nuxt.config.ts的routeRules中配置：

  export default defineNuxtConfig({
    routeRules: {
      '/**': {
        headers: {
          'Cache-Control': 'public, max-age=0, must-revalidate'
        }
      }
    }
  });
  

  该配置允许缓存但每次请求都会验证资源有效性，同时不会直接干扰bfcache的正常工作。

• 修复Nuxt hydration异常
  线上环境可能存在本地未触发的hydration不匹配问题，这类问题会导致bfcache恢复时页面渲染失败，被浏览器判定为阻止恢复。可开启Nuxt严格模式排查：

  export default defineNuxtConfig({
    nitro: {
      strict: true
    }
  });
  

  同时避免在onMounted中执行同步DOM修改，改为在pageshow事件中处理bfcache恢复场景：

  if (process.client) {
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        // 从bfcache恢复时重新初始化状态或DOM
      }
    });
  }
  

• 修正BroadcastChannel的使用方式
  之前的修改可能未适配bfcache场景，正确的做法是在pageshow事件中处理缓存恢复后的消息逻辑，并在pagehide时清理连接：

  if (process.client) {
    let bc;
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        bc = new BroadcastChannel('your-channel-name');
        bc.postMessage({ type: 'restore-state' });
      }
    });
    window.addEventListener('pagehide', (event) => {
      if (event.persisted) {
        bc?.close();
      }
    });
  }
  

• 模拟线上环境调试
  使用Vercel CLI在本地模拟线上部署环境（执行vercel build && vercel preview），看是否能复现问题。若能复现，可直接在本地调试，更容易定位根源；同时查看Vercel部署日志，排查构建阶段的依赖或配置差异。

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