Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «hydration в React 18». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Гідратація** - це процес, коли React "оживляє" вже згенерований сервером HTML: приєднує обробники подій, відновлює стан, викликає ефекти і робить сторінку інтерактивною. **Ключове:** React 18 вводить **selective hydration**, при якій React може гідратувати частини інтерфейсу там, де це важливо, і пріоритезувати гідратацію тих меж, з якими користувач взаємодіє.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЩо таке гідратація і чому її змінили - **Гідратація** - це процес, коли React "оживляє" вже згенерований сервером HTML: приєднує обробники подій, відновлює стан, викликає ефекти і робить сторінку інтерактивною. - До React 18 гідратація була досить "монолітною": усе дерево компонентів рендерилося і гідратувалося одразу, що могло блокувати головний потік і викликати затримки, особливо на слабких пристроях. React 18 змінив підхід, щоб гідратація стала більш гнучкою, чуйною і продуктивною. --- ## Нові можливості і зміни гідратації в React 18 1. **Новий API:** `hydrateRoot` **замість старого** `ReactDOM.hydrate` Тепер для гідратації серверного HTML використовується: ```js import { hydrateRoot } from 'react-dom/client'; hydrateRoot(container, <App />); ``` Старий `ReactDOM.hydrate` все ще працює, але з попередженням, що поведінка буде як у React 17. Цей перехід на новий API необхідний, щоб активувати нові можливості гідратації в React 18. ([React](https://react.dev/blog/2022/03/29/react-v18)) 2. **Selective Hydration / часткова пріоритетна гідратація** React 18 впроваджує ідею **селективної гідратації**: він може гідратувати частини інтерфейсу там, де це важливо, **і пріоритезувати** гідратацію тих меж, з якими користувач взаємодіє. ([GitHub](https://github.com/reactwg/react-18/discussions/130)) Тобто не потрібно чекати, поки вся сторінка буде повністю гідратована - React може почати гідрацію важливих елементів раніше, щоб вони стали інтерактивними швидше. 3. **Інтеграція з потоковою архітектурою (Streaming SSR + Suspense)** Гідратація в React 18 тісно пов'язана з механізмом стрімінгу на сервері і `Suspense`. Сервер може надсилати частини HTML поступово, а клієнт може гідратувати "частини" по мірі готовності і взаємодії. Це знижує навантаження при старті і робить інтерфейс доступним швидше. ([React](https://react.dev/blog/2022/03/29/react-v18)) 4. **Більш гнучке узгодження клієнта і сервера при гідратації** React 18 приділяє більше уваги тому, щоб структура HTML, стан і ефекти, відновлені на клієнті, збігалися з серверним рендером. Це знижує шанс "Mismatch Warning" (коли клієнтський рендер відрізняється від серверного). ([React](https://react.dev/blog/2022/03/29/react-v18)) Також React може більш грамотно коригувати дрібні розбіжності без жорстких збоїв. 5. **Гідратація за пріоритетами / конкурентність** Оскільки React 18 використовує модель Concurrent Rendering, гідратація теж "живе" в цій моделі: React може **призупиняти**, **перемикатися між завданнями гідратації**, **переглядати пріоритет**, якщо користувач взаємодіє з уже гідратованою частиною UI. Це робить гідратацію менш "блокуючою" для користувача. --- ## Наслідки для розробників - Потрібно оновити виклики гідратації на `hydrateRoot`, щоб скористатися новими можливостями. - Стежте, щоб серверний HTML максимально збігався з клієнтським рендером - розбіжності тепер React обробляє краще, але все ж вони можуть викликати попередження. - Використання `Suspense` і розділення інтерфейсу на межі допомагає React гідратувати "важливі" частини раніше. - Не покладайтеся на те, що весь інтерфейс стане інтерактивним одразу - дизайн і компоненти краще будувати з урахуванням поступової гідратації.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.