nuxt3中useFetch在NuxtLink跳转后,会放到浏览器端执行,怎么解决?

问题描述:
在nuxt中使用useFetch时,发现切换页面后,服务器端渲染的接口,跑到浏览器里执行了:
image.png
image.png

经过搜索排查发现:nuxt仅在首屏是服务器端渲染的结果,后面走NuxtLink跳转的,全都是spa单页应用(也就是vue在浏览器请求并渲染)

我现在临时把NuxtLink换成了链接a。

问一下大佬们,有其他方案吗?

// 修改前
<NuxtLink to="/news">资讯</NuxtLink>

// 修改后
<a href="/news">资讯</a>

news.vue

<template>
{{list.length}}
</template>
<script setup>

const {data: newsData} = await useFetch('/news.json', {
  method: 'POST',
  body: {
    type: 0
  }
})
const list = newsData?._value?.data || [];

</script>
阅读 2.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进