Server Components

Server Components рендерятся на сервере и отправляют компактный RSC payload клиенту — не полное интерактивное дерево. Они могут await async data, читать секреты и импортировать server-only модули без отправки кода в браузер.

Дочерние элементы — Server или Client Components; client children получают только serializable props.

					// Server Component — без 'use client'
import { db } from '@/lib/db';

export default async function ProductList() {
  const items = await db.product.findMany();
  return <ul>{items.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}
				

На интервью: влияние на размер bundle, async components и композиция с client islands.

Типовые ошибки: `use client` в корне, hooks в server components, non-serializable props клиентам.

Компромисс: меньший client bundle против отсутствия browser API в server tree.

Чеклист:

• Async fetch прямо в server components.
• Интерактивные листья — client children.
• Не импортируйте client-only hooks на сервере.
• Аудит serialized props на границах.