Серверные vs Клиентские компоненты

Серверные компоненты - компоненты, которые рендерятся исключительно на сервере.

Возможности:

✅ async/await прямо в компоненте
✅ Прямой доступ к БД, файловой системе
✅ Работа с серверными переменными окружения
✅ Тяжелые вычисления (не нагружают клиент)
✅ Использование headers(), cookies() из next/headers

Ограничения:

❌ Нет useState, useEffect, useReducer
❌ Нет браузерных API (window, localStorage, document)
❌ Нет событий (onClick, onChange)
❌ Нельзя использовать хуки роутера (usePathname, useRouter)

Клиентские компоненты - которые рендерятся и на сервере (для SSR), и на клиенте (гидратация).

Возможности:

✅ Все хуки React (useState, useEffect, useContext)
✅ Браузерные API (window, localStorage, Intersection Observer)
✅ Обработчики событий (onClick, onChange, onSubmit)
✅ Хуки Next.js роутера (usePathname, useSearchParams)
✅ Сторонние библиотеки с состоянием (Zustand, Redux)

Ограничения:

❌ Нельзя использовать async/await напрямую (нужен useEffect или библиотеки)
❌ Нет прямого доступа к БД (только через API)
❌ Увеличивает размер бандла