小编wir*_*417的帖子

（在多次编辑我原来的问题后，我决定彻底修改它，使其更加清晰和简洁。这是根据StackOverflow 的建议。）

设置：

创建一个新的 Nuxt 3 项目：

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>

我添加了 console.log-statement 来跟踪提取发生的位置。

没有对配置进行任何更改。据我了解，Nuxt 3 默认为 SSR。

问题：

两种情况：

I. 当对代码进行更改app.vue并因此触发 HMR 时thing，将包含来自 API 的预期数据。

二. 但是，当浏览器刷新页面时thing将为空。段落标签将为空。

我的观察：

• 相同的行为适用于 useAsyncData()。
• 每次我触发 HMR（场景一）时，客户端都会向 API 发出请求并成功接收数据（如开发人员工具的网络选项卡中所示）。
• 每当我在浏览器中刷新页面（场景二）时，我都会在终端中收到一份控制台日志，在浏览器控制台中收到一份控制台日志。两者都包含状态代码 500 的错误和消息“fetch …