如何解决计算属性导致的SSR服务端与客户端style-mismatch问题？

问题背景 #

你在Vue中用computed属性实现网格内元素的随机渲染时，遇到了SSR样式不匹配错误：

• rendered on server: style="grid-column:12;"
  • expected on client: style="grid-column: 10"
    Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
    You should fix the source of the mismatch.

你不想通过先隐藏组件再显示的方式避免CLS，同时希望能根据视口宽度调整grid-column属性，现有代码如下：

const computedStyle = computed(() => {
   const letters = '0123456789ABCDEF'
   let color = '#'
   for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)]
   }
   const style = `background: ${color}; grid-column: ${useRandomnumber(0, 12, 1)} / span 3`

   return style
})

<template>
   <div class="box" ref="item" :style="computedStyle"></div>
</template>

解决方案 #

1. 固定SSR与客户端的随机值 #

问题核心是SSR和客户端各自生成了不同的随机值，导致hydration时样式不匹配。要让随机值只生成一次，SSR和客户端复用同一个结果：

import { ref, computed, onMounted } from 'vue'

// 初始化时生成一次随机列值，SSR和客户端共用
const randomCol = ref(useRandomnumber(0, 12, 1))

// 一次性生成随机背景色
const randomBgColor = (() => {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
})()

// 带视口适配的计算属性
const computedStyle = computed(() => {
  // 根据视口宽度调整span值
  const span = window.innerWidth < 768 ? 2 : 3
  return `background: ${randomBgColor}; grid-column: ${randomCol.value} / span ${span}`
})

2. 响应视口变化的补充处理 #

如果需要实时响应窗口大小调整，在onMounted中监听resize事件，仅调整非随机的布局参数（如span），不修改初始生成的随机列值：

const span = ref(window.innerWidth < 768 ? 2 : 3)

onMounted(() => {
  const handleResize = () => {
    span.value = window.innerWidth < 768 ? 2 : 3
  }
  window.addEventListener('resize', handleResize)
  // 组件卸载时移除监听
  return () => window.removeEventListener('resize', handleResize)
})

// 更新computedStyle依赖span
const computedStyle = computed(() => {
  return `background: ${randomBgColor}; grid-column: ${randomCol.value} / span ${span.value}`
})

3. 关键注意点 #

• 绝对不要在computed属性中生成随机值：computed会在SSR和客户端各自执行，导致两边结果不一致。
• 随机值必须在组件初始化阶段（如setup最外层、created钩子）生成一次，确保SSR和客户端拿到相同的值。
• 视口适配逻辑仅修改可动态调整的参数（如span），不触碰随机生成的固定值，避免hydration不匹配。

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