Sobes.tech
Senior

What is hydration in React/Next.js?

sobes.tech AI

Answer from AI

Hydration in React/Next.js is the process where React 'brings to life' the server-generated HTML by adding interactivity on the client side.

In Next.js, server-side rendering (SSR) first occurs, which returns a fully formed HTML. When this HTML loads in the browser, React performs hydration — it binds the generated DOM elements to React components, restoring state and event handlers. This avoids re-rendering the entire page and speeds up page load.

Example: the server delivers static HTML with content, and after loading, the client-side React code connects to this HTML and makes it interactive, for example, adding click handlers, state, etc.