Начиная с хуков, React активно атакует наши устоявшиеся ментальные модели. Серверные компоненты не являются исключением. Частенько встречаюсь с непониманием их сути, а следовательно, и ошибками использования. Давайте в нескольких постах попробую максимально просто рассказать о них, их плюсах и способах использования.
Что это такое?🤔
На первый взгляд может показаться, что разница между серверными и клиентскими компонентами в месте рендеринга. Одни на сервере, а другие на клиенте. Но это не совсем так.
Серверные компоненты — компоненты без клиентской логики. Это значит, что они отрендерились только один раз на сервере и больше перерендериваться не будут. Грубо говоря, статика.
Их «статичность» накладывает определенные ограничения:
1. Нельзя поменять отображение
2. Нельзя использовать API браузера
3. Нельзя использовать (как и большую часть API React)
Клиентские компоненты — компоненты с клиентской логикой. Это значит, что они рендерятся и на сервере, и на клиенте. А следовательно, могут перерендериваться. Грубо говоря, динамика. Это стандартные компоненты, которые отлично всё могут.
Вопрос: зачем нам серверные, если у них столько ограничений?
Простейшая загрузка данных🛞
export default async function Movie({ movieId }) {
const movie = await getMovie(movieId); // запрос на сервер
return <main>Movie: {movie.name}</main>;
}
Код, необходимый для их рендеринга, остается на сервере👍
Так как компонент не перерендерится, то на клиенте нам нужен лишь результат и вспомогательный кол для правильного согласования с остальной частью дерева.
Клиентской части механизма рендеринга React эти компоненты неинтересны совсем (почти)😴
Эти компоненты на клиенте статичны. Они не генерят перерендеры, следовательно, и мониторить их не надо, перерендеривать их не надо и т. д.
Итого.
Мы получаем идеальный инструмент для отрисовки статичных(неинтерактивных) частей нашего интерфейса. Остается только правильно организовать композицию, об этом напишу в следующем посте.