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

Keremcan Şeker — Fri, 03 May 2024 20:24:46 +0000

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>
  )
}

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

DEV Community: Keremcan Şeker

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