Suggest an edit

Improve this article

Refine the answer for “What is hydration in Angular?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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**

1. **SSR generates finished HTML on the server**
The user sees the page right away: text, buttons, markup.
2. **The HTML is sent to the browser**
At this stage the page is **visible, but not yet interactive** (clicks and bindings do not work).
3. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts240 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.