Які задачі краще вирішувати клієнтськими компонентами?

Next.jsMiddle~1 хв читання

Клієнтські компоненти в 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

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-валідація
клієнтські стори
ефекти та підписки

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

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

Premium

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