Nuxt 3 SSR：useFetch（） 或 useAsyncData 在页面刷新时返回 null

问：

请帮帮我。我有 Nuxt 3 项目，我需要 SSR。这是一个新的生成项目，除了这里所述之外，我没有更改任何默认配置。我正在使用组合 API。

这是 Vue 和 config 文件

test.vue

<template>
    <div>
        <NuxtLink to="/">balik</NuxtLink>
        <p>{{data}}</p>
    </div>
</template>

<script setup lang="ts">
const fullUrl = "https://fakestoreapi.com/products"
const data = ref({})

onMounted(async () => {
    data.value = await useFetch(fullUrl, {
        server: true,
        immediate: true 
    });
    console.log("mounted", data.value);    
})

onServerPrefetch(async () => {
    data.value = await useFetch(fullUrl, {
        server: true,
        immediate: true
    });
    console.log("server", data.value);
    console.log("************************");
})

data.value = await useFetch(fullUrl, {
    server: true,
    immediate: true
});
console.log("======================");
console.log("setup", data.value);
</script>

nuxt.config.ts

export default defineNuxtConfig({
    routeRules: {
        "/test": { ssr: true }
    }
})

这是来自服务器的控制台

setup {
  data: RefImpl {        
    __v_isShallow: false,
    dep: undefined,      
    __v_isRef: true,     
    _rawValue: null,
    _value: null
  },
  pending: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: false,
    _value: false
  },
  error: ObjectRefImpl {
    _object: { gE1Y7EtyZS: [H3Error] },
    _key: 'gE1Y7EtyZS',
    _defaultValue: undefined,
    __v_isRef: true
  },
  status: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: 'error',
    _value: 'error'
  },
  execute: [Function (anonymous)],
  refresh: [Function (anonymous)]
}
server {
  data: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: null,
    _value: null
  },
  pending: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: false,
    _value: false
  },
  error: ObjectRefImpl {
    _object: { gE1Y7EtyZS: [H3Error], uD8NPFvkOs: [H3Error] },
    _key: 'uD8NPFvkOs',
    _defaultValue: undefined,
    __v_isRef: true
  },
  status: RefImpl {
    __v_isShallow: false,
    dep: undefined,
    __v_isRef: true,
    _rawValue: 'error',
    _value: 'error'
  },
  execute: [Function (anonymous)],
  refresh: [Function (anonymous)]
}

问题是每次刷新页面时，我只得到空数据。但是，如果我将页面从 / 更改为 /test，它就会起作用。我还尝试从 routeRules 中禁用 ssr，它可以工作，但我需要 ssr 为 true。

我已经从这里阅读了这个堆栈溢出问题，但它们都不起作用。

我做了什么：

• 更改为所有 useFetchdata.value = await useAsyncFetch("products", () => $fetch(fullUrl))
• 将 nodejs 更新到 v18（我尝试了 v18.13 和 18.18.2）
• 将 nuxt 更新到最新 （“nuxt”： “^3.8.1”）
• 更改为节点 16（因为从上一篇文章中有人说更改节点 16 有所帮助）
• 尝试了nextTick，仅在客户端工作。我在服务器端需要它。

我在这里遗漏了什么吗？或者是否有任何使用 ssr 获取数据的教程，因为只要我找到教程，它们总是 ssr： false 或者只是代码，当我尝试相同的代码时，它不起作用。还是这个未解决的问题来自 Nuxt 3？

注意：我将添加参数以重新获取数据。