There was an error while hydrating this Suspense boundary. Switched to client rendering. Next.js 14
Keremcan Şeker
Posted on May 3, 2024
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.
💖 💪 🙅 🚩
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.