未处理的运行时错误错误：Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。s答案

【问题标题】：Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.s未处理的运行时错误错误：Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。s
【发布时间】：2023-01-30 03:38:27
【问题描述】：

反应版本 18.2.0 Nextjs 13.1.5

当我尝试创建onClick 来更改网站上的主题时。我得到这个未处理的运行时错误：

错误：Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。s

const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={darkMode ? "dark" : ""}>
      <Head>
        <title>Nared Fuengverojsakul</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className=" bg-white px-10 dark:bg-gray-900 md:px-20 lg:px-40">
        <section className="min-h-screen">
          <nav className="py-10 mb-12 flex justify-between dark:text-white">
            <h1 className="font-burtons text-xl">PORTFOLIO</h1>
            <ul className="flex items-center">
              <li>
                <BsFillMoonStarsFill
                  onClick={() => setDarkMode(!darkMode)}
                  className=" cursor-pointer text-2xl"
                />
              </li>
      </main>
    </div>
);

未处理的运行时错误：

错误：补水时出错。因为错误发生在 Suspense 边界之外，所以整个根将切换到客户端呈现。

【问题讨论】：

标签： reactjs react-native next.js

【解决方案1】：

首先，检查控制台是否出现任何错误。如果是这样修复它们，下一步如果你正在导入不需要服务器端渲染的组件。使用以下导入类型以避免水合作用错误。

const Comp= dynamic(() => import('path of file'), { ssr: false })

【讨论】：