React Hydration

What is Hydration? Hydration is the process where React "waters the dry HTML" by adding interactivity and event handlers to server-side rendered (SSR) HTML on the client side.

The Process Match

graph TD
    A[React Component Tree] --> B[SSR HTML Generation]
    B --> C[Static HTML + React Bundle]
    C --> D[Client Receives HTML]
    D --> E[Content Paint - LCP]
    E --> F[React Rebuilds Component Tree]
    F --> G{DOM Comparison}
    G -->|Match| H[Hydration Success]
    G -->|Mismatch| I[Hydration Error]
    H --> J[Interactive React App]
    I --> K[Re-render + Warning]
    
    style A fill:#4A90E2
    style B fill:#4A90E2
    style C fill:#50C878
    style F fill:#87CEEB
    style H fill:#90EE90
    style I fill:#FFB6C1
    style J fill:#87CEEB

Server Side: React component tree is rendered to static HTML and sent to client Client Side: React rebuilds the component tree and compares it with the received SSR DOM Adoption: If they match, React adopts the existing DOM and adds interactivity Key Points Purpose: Restores interactivity and event handlers that were lost during server-side rendering Requirement: Client-side component tree must match the SSR DOM exactly for React to adopt it Timing: Occurs after the initial HTML content paint (LCP) Common Hydration Errors Incorrect HTML element nesting Different data used between server and client rendering Using browser-only APIs during SSR Side effects causing mismatches Inconsistent component state Mental Model Think of SSR HTML as "dry" content that needs to be "watered" with JavaScript functionality to become a fully interactive React application.

💡 Memory Tip "Same Recipe, Same Cake" 🍰

Just like baking a cake, hydration only works when the server and client follow the exact same recipe (component tree). If the server bakes a chocolate cake but the client expects vanilla, React throws a hydration error! Both must produce identical "cakes" (DOM structures) for hydration to succeed.