Get the latest tech news
Understanding Hydration Errors by Building a SSR React Project
If you’ve written React code in any server-rendered framework, you’ve almost certainly gotten a hydration error. These look like: Text content does not match server-rendered HTML or Error: Hydration failed because the initial UI does not match what was rendered on the server And after the first time you see this, you quickly realize you can just dismiss it and move on... kind of odd for an error message that’s so in-your-face (later on, we’ll see that you might not want to dismiss them entir
hydrateRoot lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server. So to “hydrate” our application, we just need to add some Javascript code on the client side, calling hydrateRoot and referencing this div: Similarly, most things that check the window or any browser-specific APIs can lead to these errors, since those only exist on the client and not the server.
Or read this on Hacker News