Nuxt3中嵌套useFetch引发Hydration节点不匹配问题求助

问题根源 #

服务端渲染（SSR）时，你在<script setup>顶层直接await请求，服务端会等待接口返回后渲染出带内容的<div>；但客户端初始化时，Pinia的postData和postContent初始值为null，客户端首次渲染的是v-if对应的空注释节点<!---->，和服务端输出的DOM结构不一致，从而触发Hydration不匹配警告。

而你尝试onMounted时数据始终为null，是因为没有通过响应式方式获取Pinia的state——直接赋值const postData = contentStore.postData只能拿到初始的null，无法跟随store状态更新。

解决方案 #

方案1：保留SSR，确保服务端客户端状态同步 #

如果需要服务端渲染提升SEO，可通过以下方式保证两端状态一致：

1. 用storeToRefs获取Pinia state的响应式引用
2. 保留顶层await让服务端完成请求，Pinia会自动将服务端状态序列化同步到客户端

修改页面代码：

<template>
  <div v-if="postData && postContent">
    {{ postData }}
    {{ postContent }}
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'

const config = useRuntimeConfig()
const route = useRoute()
const slug = route.params.slug
const url = config.public.wpApiUrl
const contentStore = useContentStore()

// 服务端/客户端均执行请求，服务端状态自动同步到客户端
await contentStore.fetchPostData({ url, slug })

// 通过storeToRefs获取响应式state
const { postData, postContent } = storeToRefs(contentStore)
</script>

方案2：仅客户端请求，避免SSR渲染差异 #

如果不需要该页面的SSR能力，可使用client-only组件隔离客户端渲染内容，同时保证数据响应式：

<template>
  <!-- client-only标记服务端不渲染内部内容，避免Hydration不匹配 -->
  <client-only>
    <div v-if="postData && postContent">
      {{ postData }}
      {{ postContent }}
    </div>
  </client-only>
</template>

<script setup>
import { storeToRefs } from 'pinia'

const config = useRuntimeConfig()
const route = useRoute()
const slug = route.params.slug
const url = config.public.wpApiUrl
const contentStore = useContentStore()
const { postData, postContent } = storeToRefs(contentStore)

// 仅客户端执行请求
onMounted(async () => {
  await contentStore.fetchPostData({ url, slug })
})
</script>

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