What is hydration in Angular?
Hydration in Angular is the process by which the client-side Angular application "brings to life" the HTML generated on the server (SSR).
How it works, step by step
- SSR generates finished HTML on the server The user sees the page right away: text, buttons, markup.
- The HTML is sent to the browser At this stage the page is visible, but not yet interactive (clicks and bindings do not work).
- Hydration connects Angular on the client The browser loads the Angular bundle, compares its structure with the already-finished HTML, and:
- attaches event handlers
- restores state
- enables reactivity
Result: the page becomes interactive without a re-render.
Why hydration is needed
| Problem without hydration | Solution with hydration |
|---|---|
| The browser gets HTML, then Angular redraws everything from scratch | Angular simply connects to the already-created HTML |
| Wasted time and unnecessary redraws | Faster, and without the page "flashing" |
| Longer First Interaction | Faster UI response |
What hydration gives Angular
- A fast page start after SSR
- No visual content "jump"
- Instant interactivity
- Better Core Web Vitals (especially TTI, FCP)
Conclusion
Hydration is a mechanism that lets Angular avoid re-rendering SSR content from scratch, and instead connect to it and make it interactive. It is a key element that makes SSR genuinely fast and useful for the user.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.