Nuxt 3.7.1页面刷新时useFetch未调用，显示旧数据问题

问题原因 #

Nuxt 3 默认会对 useFetch 的请求做静态缓存（尤其在静态部署模式下）。部署时会预渲染页面并缓存接口返回的数据，后续刷新页面时会直接读取缓存的旧数据，不会发起新的接口请求。

解决办法 #

1. 禁用请求缓存

给 useFetch 添加 cache: 'no-store' 配置，强制每次请求都从接口获取最新数据：

const { data: res } = await useFetch(
    "https://getcontent-***-uc.a.run.app/",
    {
        method: "GET",
        query: {
            websiteId: "***",
            contentGroupId: "***",
        },
        cache: 'no-store'
    }
);

也可以使用 revalidate: 0 达到同样效果，它会强制每次请求都重新验证数据：

const { data: res } = await useFetch(
    "https://getcontent-***-uc.a.run.app/",
    {
        method: "GET",
        query: {
            websiteId: "***",
            contentGroupId: "***",
        },
        revalidate: 0
    }
);

2. 调整部署模式

如果你的网站依赖实时数据，建议放弃静态部署（nuxt generate），改用服务端渲染（SSR）部署：

• 执行 nuxt build 构建项目
• 用 nuxt start 启动服务
  这种模式下，每次页面请求都会在服务端重新调用接口获取最新数据，从根源避免静态缓存问题。

3. 手动触发刷新（备选方案）

如果需要保留部分缓存逻辑，也可以在页面挂载后手动触发请求刷新：

const { data: res, refresh } = await useFetch(
    "https://getcontent-***-uc.a.run.app/",
    {
        method: "GET",
        query: {
            websiteId: "***",
            contentGroupId: "***",
        },
    }
);

onMounted(() => {
    // 页面挂载后强制刷新数据
    refresh();
});

注意：这种方式可能会触发两次请求（预渲染一次+挂载后一次），性能不如直接禁用缓存。

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