Какие есть ограничения у серверных компонентов в Next.js? (Отсутствие состояния, хуков)

Question

Серверные компоненты не могут использовать состояние (useState), эффекты (useEffect) и другие хуки жизненного цикла, потому что они рендерятся один раз на сервере и не "живут" в браузере. Они также не могут использовать браузерные API (например, window или document) и обработчики событий.

YeaHub · Accepted Answer

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') для всего интерактивного (формы, кнопки, состояние, анимации).