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

keremcanseker

Keremcan Şeker

Posted on May 3, 2024

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.

💖 💪 🙅 🚩
keremcanseker
Keremcan Şeker

Posted on May 3, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related