DEV Community

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

Posted on

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

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.

Top comments (0)