Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке hydration?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Hydration (гідратація)** - це процес, при якому **React «оживляє» вже готовий HTML**, отриманий із сервера, **підключаючи до нього JavaScript і обробники подій**. **Ключове:** hydration відбувається при SSR, SSG та ISR, а Server Components у Next.js не гідратуються - гідратуються лише Client Components.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Hydration (гідратація)** - це процес, при якому **React «оживляє» вже готовий HTML**, отриманий із сервера, **підключаючи до нього JavaScript і обробники подій**. Простіше: > **HTML вже є → React підключається → сторінка стає інтерактивною** ## Як працює hydration (по кроках) 1. Сервер віддає **готовий HTML** ```html <button>Click me</button> ``` 2. Браузер **одразу показує контент** (сторінка видна, але «мертва») 3. Завантажується JavaScript-бандл 4. React: - зіставляє HTML з Virtual DOM - навішує `onClick`, `onChange` тощо 5. Сторінка стає **інтерактивною** ``` HTML → JS → hydrate → interactivity ``` --- ## Hydration vs Render | | Render | Hydration | |---|---|---| | Де | сервер | браузер | | HTML | створюється | вже є | | JS | Ні | Так | | Події | Ні | Так | | Інтерактивність | Ні | Так | --- ## Коли відбувається hydration Hydration є, якщо: - використовується **SSR** - використовується **SSG** - використовується **ISR** **Немає hydration**, якщо: - чистий HTML (без React) - API response - middleware --- ## Hydration в App Router У App Router: - **Server Components НЕ гідратуються** - **Client Components - гідратуються** ```txt Page (Server) ├─ Header (Server) без hydration ├─ Content (Server) без hydration └─ Chat (Client) з hydration ``` Це ключова оптимізація Next.js. --- ## Приклад Client Component (гідратується) ```tsx "use client"; export function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } ``` - HTML прийде з сервера - JS підключиться - кнопка почне працювати --- ## Hydration mismatch (часта помилка) ### Що це? Коли HTML від сервера **не збігається** з тим, що React очікує на клієнті. ### Причини: - `Math.random()` - `Date.now()` - `window`, `localStorage` - умовний рендер за `typeof window` ```tsx // погано <div>{Math.random()}</div> ``` --- ## Як уникнути hydration mismatch - виносити динаміку в `useEffect` - використовувати `use client` лише там, де потрібно - перевіряти `mounted` - не використовувати browser-only API в Server Components --- ## Streaming і partial hydration Next.js вміє: - **стрімити HTML** - **гідратувати компоненти в міру завантаження JS** Це: - прискорює перший екран - знижує TTI - покращує UXДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.