Hydration in Next.js

Hydration connects server-rendered HTML with client-side JavaScript.

Definition

Hydration is the process where React attaches event listeners to server-rendered HTML to make it interactive in the browser.

Why We Use Hydration

• Enable interactivity
• Improve SEO with server rendering
• Faster first page load

When To Use

Automatically happens when using Client Components in Next.js.

How It Works

Server → Sends HTML → Browser loads JS → React hydrates → Interactive UI

Real-World Example

A blog page loads instantly from server HTML, then like buttons become clickable after hydration.

Interview Tip

Hydration makes server-rendered HTML interactive by attaching React event listeners in the browser.