为什么我在水合作用期间收到有关“预期服务器 HTML 包含匹配标签”的警告？

Question

我很难理解为什么我的服务器出现水合作用错误。 我尝试使用Link组件的遗留行为，但没有任何效果。 我也收到此错误：

Warning: Expected server HTML to contain a matching <a> in <ul>.
    at a
    at ul
    at div
    at div
    at div
    at nav
    at div
    at Home (webpack-internal:///./components/Header.js:24:80)

这与条件渲染有关吗？

这是代码片段，您可以在前端的https://github.com/Adissuu/Database查看完整文件frontend -> components -> Header ：

<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
  <li className="text-white">
      <Link href="/signin" className=' content-center text-white hover:text-forest-200 duration-300'>
          Sign In
      </Link>
  </li>
  <li className="text-white">
      <Link href="/signup" className='btn bg-forest-100 p-1 content-center rounded-md text-white hover:bg-forest-200 duration-300'>
          Sign Up
      </Link>
  </li>

  {isAuth() && (
      <a style={{ cursor: 'pointer' }} onClick={() => signout(() => Router.replace(`/signin`))}>
          Signout
      </a>
  )}
</ul>

Answer 1

几个小时后，我偶然发现了一个可行的解决方案：为 Header 禁用 SSR 。 这没什么大不了的，但它有助于通过 function 进行条件渲染。

所以在Header.js的父级中：

import dynamic from 'next/dynamic'
const Header = dynamic(() => import("./Header"), { ssr: false });