В чем разница между серверным компонентом и клиентским?

Серверные компоненты (RSC) выполняются только на сервере и присылают клиенту готовый результат; клиентские — обычные React-компоненты, чей JS попадает в браузер и работает там.

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

// выполняется ТОЛЬКО на сервере (Next.js App Router — по умолчанию)
const ProductPage = async ({ params }) => {
  const product = await db.products.find(params.id); // прямой доступ к БД
  return <ProductView product={product} />;
};

• Могут быть async, ходить в БД/файлы/секретные API напрямую.
• Их код не попадает в бандл — тяжёлые зависимости (markdown-парсер, ORM) бесплатны для клиента.
• Не имеют состояния и интерактивности: никаких useState/useEffect/обработчиков.
• Рендерятся при запросе (или билде), результат — сериализованное дерево.

Клиентские компоненты

'use client';

const AddToCart = ({ productId }) => {
  const [count, setCount] = useState(1); // state, эффекты, события — можно
  return <button onClick={() => addToCart(productId, count)}>В корзину</button>;
};

• Помечаются директивой 'use client' (граница: всё импортируемое ими — тоже клиентское).
• Полный интерактив: хуки, события, браузерные API.
• При SSR тоже рендерятся на сервере в HTML, но затем гидрируются — их JS обязателен в бандле.

Как сочетаются

Серверные компоненты могут рендерить клиентские (и передавать им сериализуемые props); клиентские не могут импортировать серверные (но могут принимать их как children). Типовая структура: страница и данные — серверные, интерактивные островки (формы, кнопки) — клиентские.

Коротко для собеседования

Серверный компонент выполняется только на сервере: прямой доступ к данным, ноль JS в бандле, но без state и событий. Клиентский ('use client') — интерактивный, с хуками, его код грузится в браузер и гидрируется. Практика: данные и разметка — на сервере, интерактивные островки — на клиенте.