There was an error while hydrating this Suspense boundary. Switched to client rendering. Next.js 14
Keremcan Şeker

Keremcan Şeker @keremcanseker

Location:
Turkey
Joined:
May 3, 2024

There was an error while hydrating this Suspense boundary. Switched to client rendering. Next.js 14

Publish Date: May 3 '24
3 0

The error also looks like this:

Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error

If you look through the link you will se that it is mostly because you nested a <p> tag in another <p> tag or <div>

But for some reason you checked and that this is not the case here is the solution.

export default function Component(){
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }


  return(
    <div>
      KeremG is the best
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

I spent quite a bit of time figuring this out, just use this mounting method, and you are good to go.

Comments 0 total

    Add comment