Nuxt 2 SSR+PWA首屏加载无法获取最新数据的解决求助

核心思路 #

针对首屏（document类型导航请求）配置Network First策略（优先网络获取，失败用缓存），或者直接禁用该类请求的缓存，通过Nuxt PWA的Workbox配置实现。

具体配置步骤 #

修改项目根目录下的nuxt.config.js，在pwa.workbox中添加自定义runtimeCaching规则：

export default {
  // 其他Nuxt配置...
  pwa: {
    workbox: {
      runtimeCaching: [
        // 处理首屏及HTML页面导航请求
        {
          urlPattern: '/', // 匹配首屏路径，多页面可改为 /* 或更精准的正则（如 /^https://your-domain.com/.*$/）
          handler: 'NetworkFirst', // 优先网络请求，离线时 fallback 到缓存
          options: {
            cacheName: 'html-document-cache',
            matchOptions: {
              ignoreVary: true,
            },
            fetchOptions: {
              mode: 'navigate', // 关键：仅匹配导航类请求（刷新、输入URL跳转）
            },
            // 可选：设置缓存过期时间，避免旧缓存长期留存
            expiration: {
              maxAgeSeconds: 60 * 60 * 24 * 3, // 3天
            },
          },
        },
        // 静态资源缓存规则（可选，保持原有缓存策略）
        {
          urlPattern: /\.(js|css|png|jpg|svg|woff2)$/,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'static-assets-cache',
          },
        },
      ],
      // 可选：排除预缓存中的HTML文件（SSR场景下一般无需，预缓存多为静态资源）
      exclude: [/\.html$/],
    },
  },
}

配置说明 #

• 若想完全禁用HTML缓存，将handler改为NetworkOnly即可，但会失去离线访问能力。
• fetchOptions: { mode: 'navigate' }是关键：确保规则只捕获用户刷新、直接访问URL这类导航请求，避免影响API接口或静态资源的缓存策略。
• 规则顺序很重要：将HTML的缓存规则放在最前面，保证优先匹配。

生效步骤 #

1. 执行npm run build重新构建项目，让新的Workbox配置生效。
2. 重启服务，访问页面时Network面板会显示首屏请求优先走网络，缓存仅作为备用。
3. 若旧Service Worker仍在生效，可在浏览器DevTools的Application面板手动清除旧缓存并刷新页面。

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