Angular › Server-Side Rendering with Angular Universal

What is hydration in the context of Angular server side rendering, and why is it necessary?

Intermediate

Answer

Hydration is the process where Angular takes the already rendered HTML sent from the server and attaches the necessary behavior to it in the browser, making buttons clickable and inputs interactive, reusing the existing DOM rather than throwing it away and rebuilding it from scratch.

// Hydration is enabled by default when using @angular/ssr
// Angular reuses the server rendered HTML instead of re rendering everything from scratch
provideClientHydration()

Real-world example A shopping site's add to cart button appears instantly from the server rendered HTML, and becomes fully clickable only a moment later once Angular finishes hydrating the page in the visitor's browser, without any visible flicker.

Common follow-ups: What happens if the HTML generated on the server does not exactly match what Angular expects during hydration?;What is the practical performance benefit of hydration compared to a full client side re render?

Angular Signals;Performance & Lazy Loading