Member-only story
What is React Hydration?
If you’ve been working with React for a while, you’ve likely heard the term Hydration. It sounds like a buzzword thrown around by senior developers, but it is actually one of the most important concepts to understand for building fast, SEO-friendly web applications.
To understand hydration, we first need to look at how a standard React application loads in the browser, and why that standard method has a major flaw.
The Problem: The “Empty Table” of Client-Side Rendering
When you build a standard React application (using a tool like Vite or Create React App), you are using Client-Side Rendering (CSR).
Imagine walking into a restaurant, sitting at an empty table, and the waiter hands you a box of raw ingredients and a recipe book. You have to wait for all the ingredients to arrive, read the instructions, and cook the meal yourself before you can take a single bite.
This is exactly what CSR does to your users:
- The user visits your website.
- The server sends a completely blank HTML file (
<div id="root"></div>). - The user stares at a white screen while their browser downloads megabytes of JavaScript.
- Once downloaded, React boots up, reads the code, and builds the UI…
