Чем Server Components отличаются от Client Components в Next.js?

Коротко: Server Components выполняются на сервере и не отправляют свой JS в браузер; Client Components нужны для state, effects и browser events.

Что важно сказать на собеседовании: На собеседовании важно связать эту тему с реальной render-моделью React: где источник данных, что вызывает обновление, какие побочные эффекты допустимы и как это влияет на поддержку интерфейса.

Пример (Next.js/TSX):

// app/page.tsx — Server Component
import Counter from './Counter';

export default async function Page() {
  const products = await getProducts();
  return <Counter initialCount={products.length} />;
}

Типичные ошибки: Типичная ошибка — отвечать только синтаксисом и не объяснять, как решение поведёт себя при повторном render, смене props, unmount или росте данных.

Практический контекст: В практике это встречается в формах, списках, dashboards, личных кабинетах и компонентах design-system; сильный ответ показывает не только API, но и границы применения.