Next.js开发排序应用出现Prop `style` did not match警告是什么原因？

你当前使用的是支持服务端渲染（SSR/SSG/ISR）的React框架（如Next.js、Remix等），报错的核心原因是服务端和客户端生成的随机数组不一致：

• 服务端渲染页面时，会执行一次fillWithRandom(300)生成随机数组，用这套数据渲染出对应高度的DOM节点
• 客户端完成资源加载后进入hydrate（注水）阶段，会再次执行fillWithRandom(300)生成新的随机数组
• 两次生成的随机数完全不同，导致客户端生成的DOM元素height属性和服务端返回的不匹配，触发prop校验警告

方案1：随机数生成逻辑移到客户端侧执行 #

useEffect只会在客户端运行，不会在服务端执行，把随机数组生成逻辑放在useEffect中即可保证两端渲染结果一致：

const SortingApp: React.FC = () => {
  const fillWithRandom = (quantity: number):number[] => { 
    const results: number[] = [];
    while(results.length < quantity){
        let candidateInt = Math.floor(Math.random() * quantity) + 1
        if(results.indexOf(candidateInt) === -1) results.push(candidateInt)
    };
    return results 
  }

  // 初始state设为空数组
  const [data, setData] = useState<number[]>([])

  // 仅客户端挂载后生成随机数组
  useEffect(() => {
    setData(fillWithRandom(300))
  }, [])

  // 可选：加加载状态避免空内容闪烁
  if(data.length === 0) return <div>加载中...</div>

  return (
    <>
    <Layout>
    <Navbar />
    <div className="mx-5 flex gap-x-0.5 place-content-center">
        {data.map(x => {
            return (
                <div key={x} className={`w-1 bg-black`} style={{ height: `${x}px` }} />
            )
        })}
    </div>
    </Layout>
    </>
  )
}

方案2：关闭组件的服务端渲染 #

如果你使用的是Next.js框架，可以直接给组件添加'use client'标记，或者用dynamic导入关闭该组件的SSR能力，让整个组件仅在客户端渲染：

// 页面中导入组件时使用dynamic
import dynamic from 'next/dynamic'
const SortingApp = dynamic(() => import('./SortingApp'), { ssr: false })

方案3：使用种子随机数保证两端生成结果一致 #

如果你需要服务端也渲染排序柱子的内容，可以替换默认的随机数生成逻辑为种子随机数生成器，传入固定的种子值，保证服务端和客户端运行时生成的随机序列完全一致。

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