Вопрос с собеседования · Frontend

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

MiddleReact
Ещё спрашивают так:
  • Что делает "use client"?
  • Что такое React Server Components?
Коротко

Серверный компонент выполняется только на сервере: может читать базу и секреты, его код не попадает в бандл браузера, но в нём нет состояния, эффектов и обработчиков событий. Клиентский (файл с "use client") — обычный интерактивный компонент; директива ставит границу: всё, что он импортирует, тоже уходит клиенту. Границу ставят как можно ниже — на интерактивных «листьях». Серверный компонент может передать клиентскому сериализуемые props или children из серверных компонентов. SSR — другое: он превращает в HTML и клиентские компоненты, которые затем гидратируются; серверные компоненты не гидратируются вовсе.

  • Функции и классы через props в клиентский компонент передать нельзя (кроме Server Actions)
  • Секреты в клиентском компоненте утекут в бандл
  • Контекст и хуки — только в клиентских

А ещё Типичная ошибка — "use client" на корневом layout, и всё приложение становится клиентским

Подробно

// ProductPage.tsx — серверный
export default async function ProductPage({ id }) {
  const p = await db.product.find(id);
  return <><h1>{p.name}</h1><AddToCart productId={p.id} /></>;
}
// AddToCart.tsx
"use client";
export function AddToCart({ productId }) { const [n, setN] = useState(1); ... }

Что хотят услышать

  • Где выполняются и что умеют.
  • "use client" как граница, ставить ниже.
  • Отличие от SSR.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Серверные компоненты могут использовать useState и onClick, как и обычные клиентские
  • ✗Серверные компоненты — это просто другое название SSR: тот же HTML, а затем гидратация
  • ✗"use client" лучше ставить на корневой layout, чтобы всё приложение было интерактивным
  • ✓Выполняются только на сервере и не попадают в бандл; "use client" ставит границу

Связанные вопросы

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

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

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

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