В чём разница между Server Components и Client Components в Next.js?

Server Component выполняется только на сервере и отправляет клиенту готовый результат, Client Component загружается в браузер и умеет работать с состоянием и событиями.

Server Component

• Может ходить в базу и читать секреты напрямую.
• Не добавляет JavaScript в бандл.
• Не может использовать useState, useEffect и обработчики событий.

Client Component

• Помечается 'use client' в начале файла.
• Использует хуки, события, window и браузерные API.
• Сначала рендерится на сервере (HTML), затем гидратируется в браузере.

Как их сочетать

Серверный компонент может импортировать клиентский и передавать ему сериализуемые пропсы. Обратное устроено иначе: клиентский компонент получает серверные как children.

// Server
import LikeButton from './LikeButton';
export default async function Post({ id }) {
  const post = await getPost(id);
  return <article>{post.title}<LikeButton postId={id} /></article>;
}

// LikeButton.tsx
'use client';
export default function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>;
}

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

По умолчанию делаем компоненты серверными, а 'use client' ставим только там, где нужна интерактивность, и держим клиентские участки небольшими.