Hydration is a React process used in Server-Side Rendering (SSR) and Static Site Generation (SSG), where React attaches JavaScript behavior to HTML that has already been rendered before it reaches the browser.
In other words, hydration does not create the HTML. The HTML already exists because it was generated on the server (or at build time). React simply takes over that existing HTML and makes it interactive by attaching:
Event handlers
Component state
React Hooks
Internal React component tree
Without hydration, users would only see a static HTML page.
Important: Hydration is not used in traditional Client-Side Rendering (CSR) because there is no existing HTML for React to reuse. In CSR, React creates the entire DOM itself.
Rendering Flow Comparison
Rendering Type
Who Generates HTML?
Is Hydration Needed?
Why?
Client-Side Rendering (CSR)
React in the browser
❌ No
React builds the DOM from scratch using createRoot().
Server-Side Rendering (SSR)
Server
✅ Yes
React attaches JavaScript to server-rendered HTML using hydrateRoot().
Static Site Generation (SSG)
Build process
✅ Yes
React hydrates the pre-generated HTML when the page loads.
React Hydration Lifecycle
┌───────────────────────────────┐
│ 1. React Component │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ 2. Server Renders HTML │
│ (SSR / SSG) │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ 3. HTML Sent to Browser │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ 4. Browser Displays HTML │
│ (Static, Not Interactive) │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ 5. React JavaScript Loads │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ 6. React Hydrates the Page │
│ • Compares HTML │
│ • Attaches Events │
│ • Restores State │
│ • Starts Hooks │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ 7. Interactive React App │
└───────────────────────────────┘
React Rendering vs Hydration (CSR vs SSR)
Feature
Client-Side Rendering (CSR)
Server-Side Rendering (SSR + Hydration)
Who generates the initial HTML?
React in the browser
React on the server
Initial HTML sent to browser
Empty container (<div id="root"></div>)
Fully rendered HTML
User sees page before JavaScript loads?
❌ No
✅ Yes
What React does after JavaScript loads?
Creates the entire DOM
Reuses existing HTML and attaches React behavior
React API used
createRoot()
hydrateRoot()
Is Hydration required?
❌ No
✅ Yes
Reason
There is no existing HTML to reuse
Existing HTML needs to become interactive
Common frameworks
Create React App, Vite React SPA
Next.js, Remix, Gatsby (SSR/SSG)
Client-Side Rendering (CSR) Flow
Step
Process
Explanation
1
Browser requests the page
User navigates to the application.
2
Server returns minimal HTML
Typically only <div id="root"></div>.
3
Browser downloads JavaScript bundle
React application code is loaded.
4
React calls createRoot()
React starts rendering the application.
5
React creates the DOM
All HTML elements are generated in the browser.
6
Interactive page is displayed
The application is fully functional.
Server-Side Rendering (SSR + Hydration) Flow
Step
Process
Explanation
1
Browser requests the page
User navigates to the application.
2
Server renders React components
React generates HTML on the server.
3
HTML is sent to the browser
User immediately sees the page.
4
Browser downloads JavaScript bundle
React application code is loaded.
5
React calls hydrateRoot()
React matches the existing HTML with the component tree.
6
React attaches event handlers, state, and hooks
Existing HTML becomes interactive without recreating the DOM.
