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>
相关推荐
....49242 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
清风ai明月13 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿13 小时前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
剑亦未配妥13 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
zoahxmy092913 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon1111313 小时前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR13 小时前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风0123413 小时前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
gongzemin14 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js