Nuxt3生产环境无法同步Strapi更新内容求助

核心症状 #

• 本地开发环境/本地Docker容器中，修改Strapi内容后站点能实时同步更新
• 生产环境需手动触发前端流水线发布才会更新内容，即使Cloudflare缓存到期后仍无变化
• 已尝试更换托管服务商、禁用/清除浏览器缓存，均无效

可能原因及解决方案 #

1. 确认Nuxt部署模式是否为静态生成 #

如果你的Nuxt配置中启用了target: 'static'或ssr: false且使用静态部署，内容会在构建阶段被预渲染并固化到静态文件中，后续不会再向Strapi发起请求。这种情况下：

• 若要保留静态部署：配置Strapi Webhook，在内容更新时自动触发前端重新构建部署
• 若要动态获取内容：将部署模式改为SSR（ssr: true），确保页面每次渲染时都会请求Strapi

2. 修正Apollo客户端缓存策略 #

你当前在useAsyncQuery中使用的cache: false并非Apollo GraphQL的标准配置项，需替换为正确的缓存控制策略：

• 在页面请求中明确指定fetchPolicy：

const { data }: any = await useAsyncQuery({
  query: GET_HOMEPAGE,
  fetchPolicy: 'network-only' // 强制每次请求都从网络获取最新数据
});

• 或在全局Apollo配置中设置默认策略（nuxt.config.ts）：

apollo: {
  clients: {
    default: {
      httpEndpoint: `https://STRAPI_PROD_URL/graphql`,
      browserHttpEndpoint: `https://STRAPI_PROD_URL/graphql`,
      connectToDevTools: false,
      defaultOptions: {
        query: {
          fetchPolicy: 'network-only',
          errorPolicy: 'all'
        }
      }
    },
  },
}

3. 禁用Nuxt服务器端页面缓存 #

Nuxt3生产环境的Nitro引擎可能会缓存SSR页面，导致内容无法更新。可以在页面级别或全局禁用缓存：

• 页面组件中添加页面元数据：

definePageMeta({
  cache: false // 禁用当前页面的服务器缓存
})

• 全局配置（nuxt.config.ts）：

export default defineNuxtConfig({
  nitro: {
    cache: false // 禁用所有服务器端缓存
  }
})

4. 配置Strapi Webhook触发前端更新 #

无论采用SSR还是静态部署，配置Strapi Webhook都能确保内容变更后自动触发前端更新：

1. 进入Strapi后台 → 设置 → Webhooks → 新建Webhook
2. 填写前端部署平台的触发URL（如CI/CD流水线的触发地址、托管平台的构建钩子）
3. 选择触发事件：勾选条目创建、更新、删除等相关内容变更事件
4. 保存后，修改Strapi内容时会自动触发前端部署/缓存清除

5. 调整HTTP缓存头 #

检查生产环境返回的Cache-Control响应头，避免浏览器或CDN缓存页面内容：
在nuxt.config.ts中添加全局HTTP头配置：

export default defineNuxtConfig({
  nitro: {
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      Pragma: 'no-cache',
      Expires: '0'
    }
  }
})

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