nuxt3服务端与客户端渲染不一致-案例

环境

makefile 复制代码
node: v20.12.2,
"nuxt": "^3.11.2",
"vue": "^3.4.27",

所有案例均基于 nuxt3

随机数

html 复制代码
<template>
  <div>
    <h3>nuxt3 渲染上的不一致</h3>

    <div>
      <div v-for="item in colors">{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
const colors = ref([]);

function generateRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

for (let i = 0; i < 5; i++) {
  colors.value.push(generateRandomColor());
}
</script>

看代码上没问题,放 SPA里面 也不会有任何问题,但是放nuxt3/SSR框架里面,就会出现 服务端渲染和客户端渲染不一致问题

scss 复制代码
Hydration text content mismatch on  (水合不匹配)

... 某一个组件

- rendered on server: #047FC3   服务端渲染,得到的第一项的值是 #047FC3
- expected on client: #1E87BA   客户端的时候,重新运行,变成了 #1E87BA

造成了,服务端和客户端渲染内容不一致, nuxt3 会以 客户端渲染为主, 所以我们看到的结果是: #1E87BA

解决办法:

  1. 将数据定死,就N个, 不管页面如何刷新 colors 始终是那些数据
js 复制代码
const colors = ref([
    "xxxx",
    "1111"
])
  1. server中取数据
html 复制代码
<template>
  <div>
    <h3>nuxt3 渲染上的不一致</h3>

    <div>
      <div v-for="item in colors">{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
const colors = ref([]);

const res = await useFetch('/api/getColors')

colors.value = res.data.value
</script>

server/api/getColors.ts

js 复制代码
function generateRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

export default defineEventHandler(() => {
  let list = []

  for (let i = 0; i < 5; i++) {
    list.push(generateRandomColor());
  }

  return list
})

network 中看这个页面的字符串内容,从 api 接口中取值,是都拼接好了结果的。

  1. 将取数的逻辑放在 onMounted 里面 从 客户端去取数据,填充数据,这样就不会造成服务端与客户端生成的结果不一致的警告
html 复制代码
<template>
  <div>
    <h3>nuxt3 渲染上的不一致</h3>

    <div>
      <div v-for="item in colors">{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
const colors = ref([]);

function generateRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

onMounted(() => {
  for (let i = 0; i < 5; i++) {
    colors.value.push(generateRandomColor());
  }
});
</script>
相关推荐
苹果酱056717 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.18 分钟前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding25 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥36 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信1 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩1 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司2 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
YuShiYue5 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
一个专注写代码的程序媛5 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js