Що таке hydration в Angular?
Hydration (гідратація) в Angular - це процес, за якого клієнтський Angular-застосунок "оживляє" HTML, згенерований на сервері (SSR).
Як це працює за кроками
- SSR генерує готовий HTML на сервері Користувач одразу бачить сторінку: текст, кнопки, розмітку.
- HTML надсилається в браузер На цьому етапі сторінка видно, але вона ще не інтерактивна (кліки і біндинги не працюють).
- Hydration підключає Angular на клієнті Браузер завантажує Angular-бандл, порівнює його структуру з уже готовим HTML і:
- прив'язує обробники подій
- відновлює стан
- вмикає реактивність
Результат: сторінка стає інтерактивною без повторного рендера.
Навіщо потрібна hydration
| Проблема без hydration | Рішення з hydration |
|---|---|
| Браузер отримує HTML, потім Angular заново все перемальовує | Angular просто підключається до вже створеного HTML |
| Втрата часу і зайві перемальовування | Швидше і без "блимання" сторінки |
| Довший First Interaction | Швидша реакція UI |
Що дає hydration в Angular
- Швидкий старт сторінки після SSR
- Без візуального "стрибка" контенту
- Миттєва інтерактивність
- Кращі показники Core Web Vitals (особливо TTI, FCP)
Підсумок
Hydration - це механізм, який дозволяє Angular не перемальовувати SSR-контент заново, а підключитися до нього і зробити його інтерактивним. Це ключовий елемент, який робить SSR дійсно швидким і корисним для користувача.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.