Nuxt3+Pinia渲染出现Hydration Node Mismatch警告，如何解决？

问题根源 #

你遇到的警告核心是服务端与客户端渲染的DOM结构不一致：

• 服务端渲染阶段，useLazyFetch是客户端异步方法，不会在服务端执行，导致Pinia store里没有数据。此时Grid组件渲染的是空状态的<div>。
• 客户端加载完成后，useLazyFetch获取到数据并存入store，Grid组件渲染出<a>标签，两者DOM结构不匹配触发Hydration警告。

这些警告不能忽略，可能引发后续事件绑定失效、布局错乱等问题，必须修复。

具体解决方案 #

1. 改用服务端可执行的数据获取方式 #

在pages/article/[id].vue中，替换useLazyFetch为useAsyncData（Nuxt3内置的服务端数据获取方法），确保服务端能拿到数据并同步到Pinia store，让服务端和客户端初始数据一致：

<script setup>
const route = useRoute()
const articleStore = useArticleStore()

// 服务端同步获取数据，并缓存（避免重复请求）
const { data: articleData } = await useAsyncData(`article-${route.params.id}`, () => {
  return $fetch(`/api/articles/${route.params.id}`)
})

// 将数据同步到Pinia store
if (articleData.value) {
  articleStore.setArticleData(articleData.value)
}
</script>

同时修改Pinia store，移除useLazyFetch相关逻辑，只保留数据存储的方法（比如setArticleData）。

2. 统一空状态的DOM结构 #

在Grid组件中，确保服务端和客户端在无数据时渲染完全一致的DOM，避免出现“服务端

<template>
  <!-- 数据存在时渲染列表 -->
  <div v-if="articleStore.data?.list">
    <a 
      v-for="item in articleStore.data.list" 
      :key="item.id" 
      :href="item.url"
    >
      {{ item.title }}
    </a>
  </div>
  <!-- 无数据时，服务端和客户端都渲染相同的加载状态 -->
  <div v-else class="article-skeleton">
    <!-- 这里放骨架屏或加载提示，确保服务端和客户端渲染的DOM完全一致 -->
    <div class="skeleton-item"></div>
    <div class="skeleton-item"></div>
  </div>
</template>

<!-- 在布局或page中引入Grid时添加client-only -->
<client-only>
  <Grid />
</client-only>