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

Server Components — это принципиально другой ментальная модель по сравнению с клиентскими компонентами. Их главная задача — рендерить некую статичную (или зависящую от данных) разметку.

Что НЕЛЬЗЯ использовать в Server Components:

1. Хуки React:

   • useState, useReducer, useEffect, useContext (для состояния) и другие.

   • Причина: Они связаны с жизненным циклом компонента в браузере (монтирование, обновление, размонтирование), а серверный компонент рендерится один раз и не "обновляется".

2. Браузерные API:

   • window, document, navigator, localStorage, etc.

   • Причина: Эти объекты существуют только в среде браузера, а серверный компонент выполняется в среде Node.js или Edge Runtime.

3. Обработчики событий:

   • onClick, onChange и другие пропсы, ожидающие интерактивности.

   • Причина: События происходят в браузере, а серверный компонент уже отрендерен и отправлен.

Что МОЖНО и нужно делать в Server Components:

• Получать данные напрямую из БД или API.

• Работать с файловой системой (на сервере).

• Доступ к серверным ресурсам безопасно (с использованием секретных ключей).

• Рендерить большие компоненты, не увеличивая bundle-файл клиента.

Правильное разделение:

• Используйте Server Components для всего, что не требует интерактивности (данные, макеты, статичный контент).

• Используйте Client Components (помеченные 'use client') для всего интерактивного (формы, кнопки, состояние, анимации).