< H / $ > Хак/Собесов

Перейти на PRO

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

«В чем разница между серверным компонентом и клиентским» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

Серверные компоненты (Server Components) рендерятся на сервере и передаются клиенту в виде готового HTML. Они не имеют доступа к браузерным API (localStorage, window), не поддерживают хуки (useState, useEffect) и не могут использовать интерактивность. Оптимальны для статического контента.

Клиентские компоненты (Client Components) рендерятся в браузере, поддерживают хуки, состояния и браузерные API. Подходят для интерактивных элементов (формы, анимации).

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

// Server Component (не может использовать useState)
export default function ServerComponent() {
  return <div>Static content</div>;
}

// Client Component (должен быть помечен 'use client')
'use client';
export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}