Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які задачі краще вирішувати клієнтськими компонентами?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Клієнтські компоненти в Next.js варто використовувати для задач, де інтерфейс має **реагувати на дії користувача в браузері**. Простіше: усе «живе» й інтерактивне - це клієнт. **Ключове:** якщо потрібен `useState`, `useEffect` або `onClick` - це клієнтський компонент.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКлієнтські компоненти в Next.js варто використовувати для задач, де інтерфейс має **реагувати на дії користувача в браузері**. Простіше: усе «живе» й інтерактивне - це клієнт. --- ## Коротка відповідь (для співбесіди) **Клієнтські компоненти краще підходять для:** - інтерактивного UI - керування станом інтерфейсу - роботи з браузерними API - ефектів і анімацій Якщо потрібен `useState`, `useEffect` або `onClick` - це клієнтський компонент. --- ## 1. Дії користувача та інтерактивність Кнопки, кліки, події: ```tsx 'use client' export function LikeButton() { return <button onClick={() => alert('Like')}>Like</button> } ``` Сюди ж: - форми - submit - hover - drag & drop --- ## 2. Керування станом UI Коли потрібно зберігати стан: - чи відкрита модалка - чи обрана вкладка - значення інпута - поточний фільтр ```tsx 'use client' const [isOpen, setIsOpen] = useState(false) ``` Серверні компоненти **не вміють зберігати стан UI**. --- ## 3. Форми і live-валідація - controlled inputs - валідація на льоту - показ помилок - автозаповнення ```tsx 'use client' <input value={email} onChange={...} /> ``` Навіть якщо відправка форми йде на сервер - **UI форми клієнтський**. --- ## 4. Ефекти та життєвий цикл Якщо потрібен: - `useEffect` - підписки - таймери - WebSocket - polling ```tsx 'use client' useEffect(() => { const id = setInterval(...) return () => clearInterval(id) }, []) ``` --- ## 5. Робота з браузерними API Тільки клієнтські компоненти можуть працювати з: - `window` - `document` - `localStorage` - `sessionStorage` - `navigator` - `IntersectionObserver` ```ts localStorage.getItem('theme') ``` --- ## 6. Анімації та UI-бібліотеки Більшість UI-бібліотек **вимагають клієнта**: - модалки - dropdown'и - tooltips - popovers - анімації (Framer Motion тощо) Тому часто роблять: - серверний layout - клієнтські UI-віджети всередині --- ## 7. Клієнтський стан і стори Якщо використовується: - Redux - Zustand - React Context (для UI) - SWR / React Query (на клієнті) Це клієнтські компоненти. --- ## Типові задачі - короткий список - кнопки і форми - модальні вікна - dropdown / tabs - фільтри та сортування в UI - анімації - live-валідація - клієнтські стори - ефекти та підпискиДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.