Этап 11 из 12 · ≈ 6 ч

Серверные компоненты

Основа с Middle

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

Серверный компонент выполняется на сервере (при сборке или на запрос), может напрямую читать базу или файлы и отправляет клиенту готовый результат — без своего JavaScript. Клиентские компоненты ("use client") работают как привычный React: состояние, эффекты, обработчики.

Что важно знать

  • Серверные компоненты не могут использовать useState, useEffect и обработчики событий.
  • Серверный компонент может отрисовать клиентский, но не наоборот — только передать серверный как children.
  • Props на границе должны сериализоваться: функции передать нельзя (кроме Server Actions).
  • Выигрыш — меньше JavaScript в браузере и данные без «водопада» запросов; цена — новая ментальная модель и зависимость от фреймворка.
  • Отличие от SSR: SSR рендерит в HTML любые компоненты, а серверные компоненты вообще не гидратируются.

Критерии освоения

Middle ≈ 6 ч

  • Разделяет серверные и клиентские компоненты и ставит границу "use client" осознанно
  • Объясняет отличие серверных компонентов от SSR

Практика. Перевести страницу с загрузкой данных в useEffect на серверный компонент и сравнить объём JS на клиенте.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем серверные компоненты отличаются от клиентских и от SSR?Middle

Серверный компонент выполняется только на сервере: может читать базу и секреты, его код не попадает в бандл браузера, но в нём нет состояния, эффектов и обработчиков событий. Клиентский (файл с "use client") — обычный интерактивный компонент; директива ставит…

Полный разбор
Что такое Server Actions и как с ними делать формы?Middle

Server Action — асинхронная функция с директивой "use server", которая выполняется на сервере, но вызывается из клиента: её передают в <form action={createOrder}> или вызывают из обработчика. Фреймворк сам делает POST-запрос. Форма работает даже без…

Полный разбор
Что такое SSR и гидратация и откуда берутся ошибки гидратации?Middle

SSR: сервер рендерит компоненты в HTML — пользователь сразу видит содержимое, поисковики его индексируют. Затем в браузере React гидратирует: загружает JS, сопоставляет его с готовым HTML и навешивает обработчики — до этого страница видна, но не интерактивна…

Полный разбор
Что такое гидратация и какие с ней бывают проблемы?Middle

После SSR браузер получает готовый HTML, но он «мёртвый»: гидратация — фреймворк загружает JS, повторно строит дерево компонентов и привязывает обработчики к существующей разметке. Проблемы: страница выглядит готовой, но не реагирует, пока JS не загрузился…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования