web dev//rendering//hydration

Hydration is the step in which JavaScript takes the HTML produced by SSR and adds interactive behavior to it, handing server-rendered HTML over to a live application. SSR gives visible HTML, hydration runs, and the same HTML becomes a live interactive application.

Hydration is the step in which JavaScript takes the HTML produced by SSR and adds interactive behavior to it, handing server-rendered HTML over to a live application. SSR gives visible HTML, hydration runs, and the same HTML becomes a live interactive application.

The server delivers a finished model; JavaScript then connects the buttons and the motors.

Hydration is CSR's JavaScript run over SSR's HTML: the same components execute in the browser, but instead of building the DOM from nothing they attach to markup that already exists, and if the two disagree the framework warns and rebuilds. The page is readable before hydration and usable after it, and the gap between the two is where the bugs of a button that did nothing live. Frameworks fight it with partial hydration (only the interactive islands) and streaming. Hydration is what makes SSR plus a rich SPA possible: a server-rendered first paint, then client-driven navigation.