React Hydration Issue

[jethroguce]

How do you solve this ?

Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

here's problematic code:

const Header = () => {
   const {signedIn} = useSiwe()
   return (
     <div>...
      {
                signedIn ? 
                (
                  <Link href="/dashboard" passHref legacyBehavior>
                    <Nav.Link>Dashboard</Nav.Link>
                  </Link>
                ) : 
                (
                  <Link href="/#about" passHref legacyBehavior>
                    <Nav.Link>About</Nav.Link>
                  </Link>
                )
              }...
        </div>
   )
}

[jethroguce]

I guess connectkit doesn't have ssr support

[lochie]

Hey @jethroguce, you may need to set up an isMounted check to avoid hydration issues in Next.js.

Easiest way to do this is to put something like this at the top of your component before rendering:

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return ... // render your component

Hope that helps!