Рендерится ли компонент с директивой "use client" на сервере? В чём различие серверных и клиентских компонентов?

В React Server Components (RSC) и Next.js App Router компоненты делятся на два типа: серверные (по умолчанию) и клиентские (помеченные директивой "use client"). Многие ошибочно думают, что клиентский компонент вообще не рендерится на сервере, но это не так.

Что делает директива "use client"

Директива не означает "рендерить только в браузере". Она помечает границу между серверным и клиентским кодом: всё, что импортируется из этого модуля, попадает в клиентский бандл. При первом запросе такой компонент всё равно выполняется на сервере, чтобы сгенерировать HTML (SSR), а затем на клиенте происходит гидратация.

Различия серверных и клиентских компонентов

• Серверные: выполняются только на сервере, могут напрямую обращаться к БД, файловой системе, секретам; не увеличивают JS-бандл; не поддерживают useState, useEffect, onClick.
• Клиентские: рендерятся на сервере (HTML) и на клиенте (гидратация); поддерживают хуки, события, браузерные API; увеличивают размер бандла.

Пример

// app/page.tsx — серверный компонент (по умолчанию)
import Counter from './Counter';
import { db } from './db';

export default async function Page() {
  const users = await db.user.findMany(); // доступ к БД напрямую
  return (
    <div>
      <h1>Users: {users.length}</h1>
      <Counter /> {/* клиентский компонент */}
    </div>
  );
}

// app/Counter.tsx — клиентский компонент
'use client';
import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Серверный компонент может импортировать клиентский, но не наоборот (клиентский не может импортировать серверный напрямую — только через props/children).

Итог: применяйте серверные компоненты для данных, тяжёлой логики и SEO-контента, а клиентские — только там, где нужна интерактивность, чтобы минимизировать JS-бандл и ускорить загрузку.