为什么我在补水过程中收到有关"expected server HTML to contain a matching tag"的警告？

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)

这与条件渲染有关吗?

以下是代码片段，您可以在frontend -> components -> Header上的https://github.com/Adissuu/Database上看到完整的文件:

<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。这不是一个大问题，但它通过一个函数帮助条件渲染。

所以在Header.js的母体中:

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