Вопрос проверяет понимание фундаментальных ограничений Server Components в Next.js, которые являются следствием их природы — выполнения на сервере, а не в браузере.
Серверные компоненты не могут использовать состояние (useState), эффекты (useEffect) и другие хуки жизненного цикла, потому что они рендерятся один раз на сервере и не "живут" в браузере. Они также не могут использовать браузерные API (например, window или document) и обработчики событий.
Server Components — это принципиально другой ментальная модель по сравнению с клиентскими компонентами. Их главная задача — рендерить некую статичную (или зависящую от данных) разметку.
Что НЕЛЬЗЯ использовать в Server Components:
Хуки React:
useState, useReducer, useEffect, useContext (для состояния) и другие.
Причина: Они связаны с жизненным циклом компонента в браузере (монтирование, обновление, размонтирование), а серверный компонент рендерится один раз и не "обновляется".
Браузерные API:
window, document, navigator, localStorage, etc.
Причина: Эти объекты существуют только в среде браузера, а серверный компонент выполняется в среде Node.js или Edge Runtime.
Обработчики событий:
onClick, onChange и другие пропсы, ожидающие интерактивности.
Причина: События происходят в браузере, а серверный компонент уже отрендерен и отправлен.
Что МОЖНО и нужно делать в Server Components:
Получать данные напрямую из БД или API.
Работать с файловой системой (на сервере).
Доступ к серверным ресурсам безопасно (с использованием секретных ключей).
Рендерить большие компоненты, не увеличивая bundle-файл клиента.
Правильное разделение:
Используйте Server Components для всего, что не требует интерактивности (данные, макеты, статичный контент).
Используйте Client Components (помеченные 'use client') для всего интерактивного (формы, кнопки, состояние, анимации).
