In short. Hydration makes server-rendered content interactive by attaching browser-side component logic to existing HTML.

Definition: Hydration attaches browser-side component logic to HTML already generated on the server, making that content interactive. In React, hydration reuses existing HTML and connects it to the application's event handlers.

Key facts

As of 17 October 2026, React's hydrateRoot documentation requires the initial browser render to match the server-rendered content.
React's renderToString reference describes server output as initial, non-interactive HTML that the browser then hydrates.
Google's JavaScript SEO basics, updated 4 March 2026, recommends server-side rendering or pre-rendering because some bots cannot run JavaScript.

How does hydration work in React?

Server-side rendering generates HTML before the browser runs the application's JavaScript. React's renderToString reference shows a server method that converts a component tree into an HTML string for the response. Its output supplies the initial content; browser-side hydration supplies the React interaction logic.

The following browser code matches React's hydrateRoot example. App is the application's root component, and root identifies the existing HTML container:

import { hydrateRoot } from 'react-dom/client';
import App from './App.js';

hydrateRoot(document.getElementById('root'), <App />);

The call attaches React to the container's content and gives React responsibility for managing the HTML inside it. The same documentation explains that people can see the server-generated HTML while the JavaScript is still loading.

What causes a hydration mismatch?

A hydration mismatch occurs when the initial browser output differs from the server output. React's hydrateRoot reference lists different server and browser data, extra whitespace around the generated HTML, and browser-only rendering logic among the causes. For example, it names window.matchMedia, a browser API, as a possible source of differences when used during rendering.

React warns about mismatches in development mode and treats them as bugs to fix. Recovery can slow the application; event handlers can also attach to the wrong elements. Checking development warnings and comparing the data used for the server and initial browser render follows directly from these documented failure modes.

What does hydration change for crawlers?

Google's JavaScript SEO documentation distinguishes pages whose response HTML contains the content from an application shell whose content appears through JavaScript. Google executes JavaScript during rendering and uses the rendered HTML for indexing.

For a hydrated website, a practical check is to compare the response HTML with the content after JavaScript runs. This comparison follows from Google's distinction between response content and rendered content: substantive text already in the response is available before browser scripts execute. The same documentation directs site owners to the Rich Results Test or URL Inspection Tool to examine rendered HTML. These checks concern content availability to Google; they do not measure selection by an AI answer engine.

FAQ

Do you need to call hydrateRoot in a framework?

React's hydrateRoot documentation says a framework may make the call for you. Check the framework's setup before adding a hydration call manually.

Why does createRoot replace your server-rendered content?

React's createRoot troubleshooting guidance explains that creating a root and calling root.render recreates the existing server-rendered HTML. This can reset focus and scroll positions or lose user input; use hydrateRoot for HTML already generated by React on the server.

Sources

Check how a page reads to answer engines. Open the GEO score analyzer