Gatsby搭配Strapi博客子页面直接访问/刷新时样式不加载问题求解

这个样式加载异常和gatsby-source-strapi无直接关联，根因是gatsby-plugin-offline的Service Worker默认缓存策略与Gatsby静态资源加载流程存在冲突，所有观察到的现象都能对应到这个逻辑：

• 从首页站内导航进入博客文章时，Gatsby自带的客户端路由预加载逻辑会提前拉取对应页面关联的CSS资源，走正常加载流程，样式显示完全正常
• 直接通过URL访问、硬刷新博客页面时，Service Worker会拦截核心静态资源的请求，默认延迟非交互场景下的资源拉取，直到用户产生交互才触发本该在页面初始加载时发起的请求，表现为样式完全丢失
• 你观察到的“鼠标悬停在‘Pozostałe wpisy’按钮上时样式开始加载”的现象，完全匹配gatsby-plugin-offline的默认SW逻辑：默认状态下Service Worker会延迟所有非必要的资源更新流程，直到检测到页面内的交互行为（包括鼠标悬停链接、元素进入视口）时，才会触发预加载动作拉取资源。

你之前排查时遇到的app-data.json和page-data.json返回404的现象，属于Gatsby原生设计的正常机制，和本次异常没有关联，不需要在这部分浪费排查时间。

• 第一步：排除无关插件嫌疑
  gatsby-source-strapi仅负责从Strapi后端拉取内容数据，不参与前端资源打包、加载逻辑，可以直接排除关联。本地测试时临时注释掉该插件的配置重新构建，会复现完全一致的样式加载异常，即可验证结论。
• 第二步：调整gatsby-plugin-offline默认配置
  默认配置下的离线插件未将页面核心CSS、JS资源纳入即时加载白名单，导致硬刷新时资源请求被挂起。需要在gatsby-config.js中修改插件配置：

  {
    resolve: `gatsby-plugin-offline`,
    options: {
      // 强制SW主动接管页面，不等待用户交互触发更新
      skipWaiting: true,
      clientsClaim: true,
      // 将核心静态资源纳入即时缓存范围
      staticFileGlobs: [
        '**/*.css',
        '**/*.js',
        'page-data/**/*.json'
      ],
      // 核心资源采用网络优先策略，避免缓存拦截延迟加载
      runtimeCaching: [
        {
          urlPattern: /\.(css|js|json)$/,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'core-static-assets',
          },
        },
      ],
    },
  }
  

• 第三步：验证修复效果
  重新构建部署后，先清理浏览器端对应站点的旧Service Worker缓存，再通过直接访问博客URL、硬刷新页面的方式测试：
  • 无Service Worker拦截的状态下，所有CSS资源会在页面初始加载时正常发起请求，不会等到用户交互才触发
  • 即使后续Service Worker生效，核心静态资源的加载也不会被延迟拦截
• 低概率排查项：如果调整配置后问题仍存在，可以检查gatsby-node.js中博客页面的createPage配置，确认页面路径没有配置错误的资源base路径，避免静态资源加载路径异常。

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