Next.js 错误：水化失败，因为初始 UI 与服务器上呈现的内容不匹配答案

【问题标题】：Next.js Error: Hydration failed because the initial UI does not match what was rendered on the serverNext.js 错误：水化失败，因为初始 UI 与服务器上呈现的内容不匹配
【发布时间】：2022-09-23 17:13:29
【问题描述】：

不知道是什么导致了这个错误？

如果我删除以下代码，则不会显示错误。

为什么这部分代码会导致此错误，我该如何解决？

      <div className=\"relative flex flex-col items-center pt-[85.25%] sm:pt-[56.25%] md:pt-[56.26%]\">
        <ReactPlayer
          className=\"absolute top-0 left-0\"
          url={`https://www.youtube.com/watch?v=u5-CF_k0KK0&list=RDu5-CF_k0KK0&start_radio=1&ab_channel=TumpyGFX`}
          width=\"100%\"
          height=\"100%\"
        />
      </div>

它很可能是ReactPlayer 组件。尝试使用next/dynamic 和ssr: false 动态导入该组件。

标签： javascript reactjs next.js hydration

【解决方案1】：

我的解决方案：

import dynamic from 'next/dynamic'

然后

const TestimonialCard = dynamic(() => import('./TestimonialCard'), { ssr: false })

希望能帮到你！

【讨论】：