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 entirely). So, what is a hydration error? And when should you care about them vs ignore them? In this post, we’re going learn more about them by building a very simple React / Express App that uses server-side rendering. But before we can answer that, we need to know what Server-Side Rendering is in the first place. Server-Side Rendering (SSR) is a technique where the server renders the HTML of a page before sending it to the client. Historically, you’d find SSR applications commonly used along- ... Read full article.