Next.js › Client Components & Hydration

What is hydration in the context of Next.js and React?

Beginner

Answer

Hydration is the process where React takes the static HTML that was already sent from the server and attaches interactivity to it in the browser, such as making buttons clickable and inputs responsive, without having to rebuild the entire page from scratch.

// Server sends static HTML first
// React then hydrates it in the browser to add interactivity
// This is handled automatically by Next.js

Real-world example A product page shows fully rendered content immediately from the server, and then a moment later, the add to cart button becomes clickable once React finishes hydrating the page in the browser.

Common follow-ups: What happens if the server rendered HTML does not match what the client expects during hydration?;Why is hydration important for both performance and search engine visibility?

Rendering (SSR/SSG/ISR);Server Components