What Is Hydration
Understand how hydration reuses server HTML.
What Is Hydration is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Defining Hydration
Hydration is the process where the client-side Angular app reuses the server-rendered HTML, attaching event listeners and state to the existing DOM instead of throwing it away and rendering again.
Life Without Hydration
Legacy SSR used destructive hydration: the client wiped the server DOM and re-rendered from scratch. This caused a visible flicker and discarded the server's work.
Non-Destructive Hydration
Modern Angular performs non-destructive hydration: it walks the existing DOM, matches it to the component tree, and reuses the nodes. No flicker, less work, better performance.
Why It Improves Vitals
Reusing server HTML means the largest content stays painted, helping LCP, and avoids layout shifts from re-rendering, helping CLS. The app becomes interactive without redrawing.
The Two-Phase Picture
Phase one: server renders HTML and sends it. Phase two: the browser downloads JS, boots Angular, and hydrates the existing markup so it becomes interactive.
Matching DOM Structure
Hydration assumes the client component tree produces the same structure the server produced. If they diverge, Angular reports a hydration mismatch.
// NG0500: During hydration Angular expected <div> but found <span>Common Mismatch Causes
Direct DOM manipulation, browser-only branches that change markup, invalid HTML nesting, and non-deterministic content (like Math.random() or Date.now() in templates) cause mismatches.
Avoiding Manual DOM Edits
Do not manipulate the DOM imperatively (for example with innerHTML outside Angular) during SSR. Let Angular own the DOM so client and server agree.
ngSkipHydration Escape Hatch
For a component that genuinely cannot hydrate (such as a third-party widget that mutates the DOM), opt it out with ngSkipHydration; Angular will re-render just that subtree.
<app-legacy-widget ngSkipHydration></app-legacy-widget>Hydration Needs SSR
Hydration only applies when there is server-rendered HTML to reuse. A pure CSR app has nothing to hydrate; hydration is the client half of the SSR story.
What Comes Next
Hydration can be full (whole app hydrates on load) or incremental (parts hydrate on demand). Choosing the right strategy is key to performance, covered in later lessons.
Quick Check
Check your hydration understanding.
Recap
Hydration reuses server HTML on the client non-destructively, improving LCP and CLS. Mismatches arise from manual DOM edits or non-deterministic markup; use ngSkipHydration as an escape hatch. Hydration is the client half of SSR.
Frequently asked questions
Is the “What Is Hydration” lesson free?
Yes — the full text of “What Is Hydration” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “What Is Hydration”?
Understand how hydration reuses server HTML. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “What Is Hydration” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.