Hydration (server rendering)

In short: Hydration means a framework “brings to life” the HTML delivered ready-made by the server in the browser by attaching events and state.

In more detail: With server rendering, the server sends complete HTML that is readable immediately. Afterwards the browser loads the JavaScript and the framework connects to the existing elements instead of creating them anew. Only then do buttons respond.

In Depth

• Hydration errors: If the server HTML differs from the browser result (for example due to Date.now() or Math.random() in render), the framework reports a mismatch.
• Cost: The JavaScript must be loaded and executed. The more interactive components, the longer it takes.
• Relief: Server components deliver HTML without client JavaScript. Only interactive parts are hydrated.
• Partial hydration: Islands hydrate only the areas that need it.
• Tip: Read browser-specific values in an effect, not during render.

See also: Lighthouse and Core Web Vitals