Skip to main content

hydration в React 18

ReactMiddle~2 хв читання
Запропонувати правку

Що таке гідратація і чому її змінили

  • Гідратація - це процес, коли 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) 2. Selective Hydration / часткова пріоритетна гідратація React 18 впроваджує ідею селективної гідратації: він може гідратувати частини інтерфейсу там, де це важливо, і пріоритезувати гідратацію тих меж, з якими користувач взаємодіє. (GitHub) Тобто не потрібно чекати, поки вся сторінка буде повністю гідратована - React може почати гідрацію важливих елементів раніше, щоб вони стали інтерактивними швидше. 3. Інтеграція з потоковою архітектурою (Streaming SSR + Suspense) Гідратація в React 18 тісно пов'язана з механізмом стрімінгу на сервері і Suspense. Сервер може надсилати частини HTML поступово, а клієнт може гідратувати "частини" по мірі готовності і взаємодії. Це знижує навантаження при старті і робить інтерфейс доступним швидше. (React) 4. Більш гнучке узгодження клієнта і сервера при гідратації React 18 приділяє більше уваги тому, щоб структура HTML, стан і ефекти, відновлені на клієнті, збігалися з серверним рендером. Це знижує шанс "Mismatch Warning" (коли клієнтський рендер відрізняється від серверного). (React) Також React може більш грамотно коригувати дрібні розбіжності без жорстких збоїв. 5. Гідратація за пріоритетами / конкурентність Оскільки React 18 використовує модель Concurrent Rendering, гідратація теж "живе" в цій моделі: React може призупиняти, перемикатися між завданнями гідратації, переглядати пріоритет, якщо користувач взаємодіє з уже гідратованою частиною UI. Це робить гідратацію менш "блокуючою" для користувача.

Наслідки для розробників

  • Потрібно оновити виклики гідратації на hydrateRoot, щоб скористатися новими можливостями.
  • Стежте, щоб серверний HTML максимально збігався з клієнтським рендером - розбіжності тепер React обробляє краще, але все ж вони можуть викликати попередження.
  • Використання Suspense і розділення інтерфейсу на межі допомагає React гідратувати "важливі" частини раніше.
  • Не покладайтеся на те, що весь інтерфейс стане інтерактивним одразу - дизайн і компоненти краще будувати з урахуванням поступової гідратації.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку