Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке hydration в Angular?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Hydration (гідратація)** в Angular - це процес, за якого клієнтський Angular-застосунок "оживляє" HTML, згенерований на сервері (SSR). **Ключове:** hydration - це механізм, який дозволяє Angular не перемальовувати SSR-контент заново, а підключитися до нього і зробити його інтерактивним.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Hydration (гідратація)** в Angular - це процес, за якого **клієнтський Angular-застосунок "оживляє" HTML, згенерований на сервері (SSR)**. --- ### **Як це працює за кроками** 1. **SSR генерує готовий HTML на сервері** Користувач одразу бачить сторінку: текст, кнопки, розмітку. 2. **HTML надсилається в браузер** На цьому етапі сторінка **видно, але вона ще не інтерактивна** (кліки і біндинги не працюють). 3. **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 дійсно швидким і корисним для користувача.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.