Nuxt 3 SSR：页面刷新时useFetch()返回null问题排查

场景复现 #

创建Nuxt3新项目：

pnpm dlx nuxi init test-project
cd test-project
pnpm i
pnpm run dev -o

修改app.vue内容如下：

<script setup>
const { data: thing } = useFetch("http://localhost:8000/things/1").then(res => {
  console.log(res)
  return res
})
</script>

<template>
  <div>
    <p>{{ thing }}</p>
  </div>
</template>

未修改任何配置，Nuxt3默认启用SSR模式。

问题现象 #

• 修改app.vue触发HMR时，thing能正常获取API数据
• 浏览器刷新页面时，thing为null，页面段落显示为空

观察结果 #

• useAsyncData()存在相同问题
• 触发HMR时，客户端请求API成功（可通过浏览器开发者工具网络面板查看）
• 页面刷新时，终端和浏览器控制台均出现500错误“fetch failed ()”，但无客户端请求记录
• 使用$fetch时，服务端请求失败，但会自动在客户端重试，最终能正常显示数据

初步结论 #

服务端请求全部失败，客户端请求全部成功。$fetch在服务端请求失败后会自动发起客户端重试，但useFetch和useAsyncData仅将错误写入响应对象，不会触发客户端请求。

疑问 #

1. 为何服务端请求全部失败？该API是本地Laravel服务的无认证GET接口，Postman可正常请求
2. 此问题是操作失误还是开发模式下的预期行为？Nuxt2中未出现此问题

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