Nuxt4数据请求的问题？

Question

下面是我的整个页面，就是请求数据列表在页面上展示：

<script setup lang="ts">
import {one} from "../api/staff";
import { ref } from 'vue';
import type {ComponentSize} from "element-plus";

const config = useRuntimeConfig()
const background = ref(true)
//isServer在前端读不到
//baseUrl,isServer在服务端都可以读到
console.log(config.isServer)
console.log(config.public.baseUrl)
const dataAll = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const allPage = ref(100)
const divRef = ref()
const xxxx = async () => {
    try {
        const res = await one({pageNum: pageNum.value, pageSize: pageSize.value})
        // 假设 res 是一个包含 data 属性的对象
        if (res.data && res.data.value) {
            console.log(res.data.value)
            allPage.value = res.data.value.total
            dataAll.value = res.data.value.rows
        }
        console.log(dataAll.value)
        console.log("dataAll.value")
        console.log(allPage.value)
    } catch (error) {
        console.error('请求出错:', error);
    }
};
const four=async ()=>{
    //const data=await httpGet('/')
    const res = await useFetch('/test.php')
    console.log(res)
    //dataAll.value=data.data
}
xxxx()
const htmToText = (html:String) => {
  //传入带html标签的字符串，返回前50个字符
  return html.replace(/<[^>]+>/g, "").substring(0, 150);
};

</script>
<template>
  <ElButton @click="four">请求接口</ElButton>
  <ElButton @click="xxxx">封装的fecth请求</ElButton>
  <div class="flex flex-col" ref="divRef">
    <div v-for="(item,index) in dataAll" :key="index" class="flex flex-col lg:flex-row  border-b border-[#dedede] py-5 my-5">
      <div class="w-80 h-50 overflow-hidden flex-shrink-0">
        <img src="https://www.chunten.com/upload/nochunten.jpg" class="w-full h-full object-cover" />
      </div>
      <div class="ml-4">
        <h2 class="text-xl font-bold">{{item.title}}</h2>
        <div class="py-3"><el-tag size="small">标签1</el-tag><el-tag size="small">标签1</el-tag><el-tag size="small">标签1</el-tag></div>
        <div>{{htmToText(item.content)}}</div>
      </div>
    </div>
    </div>
</template>

<style scoped>

</style>

但是一直出下面的错误：

Hydration completed but contains mismatches.
runtime-core.esm-bun….js?v=afa7e7ca:1637 Hydration completed but contains mismatches.
runtime-core.esm-bun…er.js?v=afa7e7ca:50 [Vue warn]: Hydration children mismatch on 
 
Server rendered element contains more child nodes than client vdom. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= 
{__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …}
 route= 
{fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …}
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< undefined > > 
  at <AsyncComponentWrapper ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= 
{ref: RefImpl}
 name="default" > 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>

不知道怎么解决，刚接触nuxt.

Answer 1

<script setup lang="ts">
import { one } from "../api/staff";
import { ref } from 'vue';

const pageNum = ref(1)
const pageSize = ref(10)

// 服务端预取数据，避免 hydration mismatch
const { data: response, error, refresh } = await useAsyncData('staffData', () =>
  one({ pageNum: pageNum.value, pageSize: pageSize.value })
)

const dataAll = ref(response.value?.data?.value?.rows || [])
const allPage = ref(response.value?.data?.value?.total || 0)

// 手动刷新数据（客户端行为）
const xxxx = async () => {
  try {
    const res = await one({ pageNum: pageNum.value, pageSize: pageSize.value })
    if (res.data && res.data.value) {
      allPage.value = res.data.value.total
      dataAll.value = res.data.value.rows
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
}

// HTML 转纯文本
const htmToText = (html: string) => {
  return html.replace(/<[^>]+>/g, "").substring(0, 150);
}
</script>

<template>
  <div>
    <ElButton @click="xxxx">重新请求数据</ElButton>
    <div class="flex flex-col" ref="divRef">
      <div
        v-for="(item, index) in dataAll"
        :key="index"
        class="flex flex-col lg:flex-row border-b border-[#dedede] py-5 my-5"
      >
        <div class="w-80 h-50 overflow-hidden flex-shrink-0">
          https://www.chunten.com/upload/nochunten.jpg
        </div>
        <div class="ml-4">
          <h2 class="text-xl font-bold">{{ item.title }}</h2>
          <div class="py-3">
            <el-tag size="small">标签1</el-tag>
            <el-tag size="small">标签1</el-tag>
            <el-tag size="small">标签1</el-tag>
          </div>
          <div>{{ htmToText(item.content) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 可根据需要添加样式 */
</style>