Server Components vs Client Components: когда что использовать

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

С появлением React Server Components (RSC) в экосистеме React произошёл фундаментальный сдвиг. Раньше всё было просто: компоненты рендерились на клиенте, а SSR был лишь оптимизацией для первоначальной загрузки. Теперь компоненты разделены на два типа, и понимание различий между ними — обязательный навык для любого React-разработчика.

Server Components выполняются исключительно на сервере. Их код никогда не попадает в клиентский бандл. Client Components работают в браузере и содержат интерактивную логику. Правильный выбор между ними напрямую влияет на производительность, размер бандла и пользовательский опыт.

В этой статье мы дадим чёткие критерии выбора, разберём типичные паттерны композиции и покажем ошибки, которые допускают даже опытные разработчики. Если вы работаете с Next.js 15, рекомендуем также прочитать нашу статью Next.js 16: что нового и как использовать в production.

Что такое Server Components

Принцип работы

Server Components рендерятся на сервере и отправляют клиенту готовый HTML вместе со специальным форматом данных (RSC Payload). JavaScript-код этих компонентов не включается в клиентский бандл. Это их ключевое преимущество.

В Next.js 15 (App Router) все компоненты по умолчанию являются серверными. Вам не нужно ничего делать, чтобы создать Server Component — просто напишите обычный компонент:

// app/products/page.tsx — это Server Component по умолчанию
import { db } from "@/lib/database";

export default async function ProductsPage() {
  // Прямой доступ к базе данных — без API-эндпоинтов
  const products = await db.product.findMany({
    orderBy: { createdAt: "desc" },
    take: 20,
  });

  return (
    <main>
      <h1>Каталог товаров</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <span>{product.price} ₽</span>
          </li>
        ))}
      </ul>
    </main>
  );
}

Что можно делать в Server Components

• Напрямую обращаться к базе данных (Prisma, Drizzle, SQL)
• Читать файловую систему сервера
• Использовать серверные API и приватные ключи
• Вызывать async/await прямо в компоненте
• Импортировать тяжёлые библиотеки без влияния на размер бандла
• Рендерить Markdown, подсветку синтаксиса и другие тяжёлые операции

Чего нельзя делать в Server Components

• Использовать useState, useEffect, useRef и другие хуки состояния
• Назначать обработчики событий (onClick, onChange, onSubmit)
• Использовать браузерные API (window, document, localStorage)
• Использовать контекст React (useContext)
• Импортировать CSS-in-JS библиотеки, зависящие от рантайма

Что такое Client Components

Принцип работы

Client Components — это привычные React-компоненты, которые выполняются в браузере. Чтобы объявить компонент клиентским, добавьте директиву 'use client' в начало файла:

"use client";

import { useState, useCallback } from "react";

export function ProductFilter({ categories }: { categories: string[] }) {
  const [selected, setSelected] = useState<string[]>([]);

  const toggleCategory = useCallback((category: string) => {
    setSelected((prev) =>
      prev.includes(category)
        ? prev.filter((c) => c !== category)
        : [...prev, category]
    );
  }, []);

  return (
    <div className="flex gap-2 flex-wrap">
      {categories.map((category) => (
        <button
          key={category}
          onClick={() => toggleCategory(category)}
          className={`px-3 py-1 rounded ${
            selected.includes(category)
              ? "bg-blue-600 text-white"
              : "bg-gray-200"
          }`}
        >
          {category}
        </button>
      ))}
    </div>
  );
}

Важное уточнение

Директива 'use client' не означает, что компонент рендерится только на клиенте. Client Components по-прежнему проходят SSR на сервере для генерации начального HTML. Директива указывает на границу — всё, что импортируется в файл с 'use client', становится частью клиентского бандла и гидрируется в браузере.

Когда нужны Client Components

• Интерактивные элементы: кнопки, формы, слайдеры, модальные окна
• Компоненты с состоянием: фильтры, корзина, счётчики
• Компоненты с эффектами: анимации, таймеры, подписки на WebSocket
• Компоненты, использующие браузерные API: геолокация, камера, clipboard

Чек-лист для принятия решений

Вот текстовая схема принятия решений, которую мы используем в наших проектах React-разработки:

Компонент нужно создать
│
├─ Есть ли интерактивность (onClick, onChange)?
│  ├─ Да → Client Component ('use client')
│  └─ Нет ↓
│
├─ Используется ли useState / useEffect / useRef?
│  ├─ Да → Client Component ('use client')
│  └─ Нет ↓
│
├─ Нужен ли доступ к браузерным API?
│  ├─ Да → Client Component ('use client')
│  └─ Нет ↓
│
├─ Нужен ли прямой доступ к БД / файловой системе?
│  ├─ Да → Server Component (по умолчанию)
│  └─ Нет ↓
│
├─ Использует ли тяжёлые зависимости для рендера?
│  ├─ Да → Server Component (не попадёт в бандл)
│  └─ Нет ↓
│
└─ По умолчанию → Server Component

Правило большого пальца: если компоненту не нужна интерактивность, оставляйте его серверным. Сомневаетесь — оставляйте серверным. Добавлять 'use client' всегда можно позже, когда появится необходимость.

Паттерны композиции

Паттерн 1: Передача серверных данных в клиентский компонент

Самый частый паттерн — получить данные в серверном компоненте и передать их как пропсы в клиентский:

// app/catalog/page.tsx — Server Component
import { db } from "@/lib/database";
import { ProductGrid } from "./product-grid"; // Client Component

export default async function CatalogPage() {
  const products = await db.product.findMany();
  const categories = await db.category.findMany();

  return (
    <main>
      <h1>Каталог</h1>
      {/* Серверные данные передаются как пропсы */}
      <ProductGrid products={products} categories={categories} />
    </main>
  );
}

// app/catalog/product-grid.tsx — Client Component
"use client";

import { useState } from "react";

export function ProductGrid({ products, categories }) {
  const [filter, setFilter] = useState("all");

  const filtered =
    filter === "all" ? products : products.filter((p) => p.category === filter);

  return (
    <div>
      <div className="flex gap-2 mb-4">
        <button onClick={() => setFilter("all")}>Все</button>
        {categories.map((cat) => (
          <button key={cat.id} onClick={() => setFilter(cat.slug)}>
            {cat.name}
          </button>
        ))}
      </div>
      <div className="grid grid-cols-3 gap-4">
        {filtered.map((product) => (
          <div key={product.id}>{product.name}</div>
        ))}
      </div>
    </div>
  );
}

Паттерн 2: Серверный компонент как children клиентского

Это мощный паттерн, позволяющий вставлять серверный контент внутрь клиентской обёртки:

// app/layout.tsx — Server Component
import { Sidebar } from "./sidebar"; // Client Component
import { Navigation } from "./navigation"; // Server Component

export default function Layout({ children }) {
  return (
    <Sidebar>
      {/* Navigation — серверный, но передаётся как children */}
      <Navigation />
      {children}
    </Sidebar>
  );
}

// app/sidebar.tsx — Client Component
"use client";

import { useState } from "react";

export function Sidebar({ children }) {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="flex">
      <aside className={isOpen ? "w-64" : "w-16"}>
        <button onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? "Свернуть" : "Развернуть"}
        </button>
      </aside>
      <main className="flex-1">{children}</main>
    </div>
  );
}

Ключевой момент: Navigation рендерится на сервере, несмотря на то что передаётся внутрь клиентского Sidebar. Это работает потому, что children — это уже готовый результат рендера, а не компонент, который нужно исполнить.

Паттерн 3: Разделение интерактивности

Если в компоненте только малая часть интерактивна, выделите её в отдельный клиентский компонент:

// app/article/[slug]/page.tsx — Server Component
import { getArticle } from "@/lib/articles";
import { LikeButton } from "./like-button"; // только кнопка — клиентская
import { ShareButton } from "./share-button"; // только кнопка — клиентская

export default async function ArticlePage({ params }) {
  const { slug } = await params;
  const article = await getArticle(slug);

  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.html }} />

      {/* Только интерактивные элементы — клиентские */}
      <div className="flex gap-4 mt-8">
        <LikeButton articleId={article.id} initialCount={article.likes} />
        <ShareButton url={`/article/${slug}`} title={article.title} />
      </div>
    </article>
  );
}

Весь контент статьи рендерится на сервере, а в клиентский бандл попадают только маленькие интерактивные кнопки.

Типичные ошибки

Ошибка 1: Избыточное использование 'use client'

Самая частая ошибка — ставить 'use client' на каждый компонент «на всякий случай». Это сводит на нет все преимущества Server Components.

// ПЛОХО: не нужна директива 'use client'
"use client"; // зачем? здесь нет интерактивности

export function Footer() {
  return (
    <footer>
      <p>2026 Company Inc.</p>
      <nav>
        <a href="/about">О нас</a>
        <a href="/contacts">Контакты</a>
      </nav>
    </footer>
  );
}

// ХОРОШО: Server Component по умолчанию
export function Footer() {
  return (
    <footer>
      <p>2026 Company Inc.</p>
      <nav>
        <a href="/about">О нас</a>
        <a href="/contacts">Контакты</a>
      </nav>
    </footer>
  );
}

Ошибка 2: Импорт серверного кода в клиентский компонент

При импорте модуля в файл с 'use client', этот модуль попадает в клиентский бандл. Если он использует серверные API ( fs, database), приложение сломается.

// ПЛОХО: db не может работать в браузере
"use client";
import { db } from "@/lib/database"; // ОШИБКА!

export function UserProfile() {
  // ...
}

Решение — загружайте данные в серверном компоненте-родителе и передавайте через пропсы.

Ошибка 3: Создание огромных клиентских границ

Если обернуть 'use client' вокруг корневого layout, все дочерние компоненты станут клиентскими:

// ПЛОХО: весь layout и его дети — клиентские
"use client";

export default function RootLayout({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// ХОРОШО: выделите провайдер в отдельный клиентский компонент
// providers.tsx
"use client";

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// layout.tsx — остаётся серверным
import { ThemeProvider } from "./providers";

export default function RootLayout({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Ошибка 4: Передача несериализуемых пропсов

Server Components передают данные клиентским через сериализацию. Нельзя передавать функции, Date-объекты, Map, Set, классы:

// ПЛОХО: функция не сериализуется
<ClientComponent onClick={() => console.log('click')}/>

// ПЛОХО: Date не сериализуется
<ClientComponent date={new Date()}/>

// ХОРОШО: примитивы и простые объекты
<ClientComponent dateISO={new Date().toISOString()}/>

Влияние на производительность

Размер бандла

Правильное использование Server Components может драматически сократить размер клиентского JavaScript. Вот реальные цифры из нашего проекта:

Подход	JS размер (gzip)	LCP	TTI
Всё клиентское (Pages Router)	287 KB	2.8 сек	4.1 сек
Смешанный (плохо разделённый)	198 KB	2.1 сек	3.2 сек
Оптимальный (SC + минимум CC)	89 KB	1.2 сек	1.8 сек

Разница в три раза по размеру бандла и вдвое по времени до интерактивности. О том, как добиться максимальных показателей PageSpeed, читайте в статье Оптимизация Next.js: от 50 до 100 баллов PageSpeed.

Streaming и Suspense

Server Components естественно интегрируются со Streaming SSR. Каждый серверный компонент, обёрнутый в Suspense, может стримиться независимо:

export default function DashboardPage() {
  return (
    <div>
      {/* Эти блоки загружаются параллельно и стримятся по мере готовности */}
      <Suspense fallback={<Skeleton />}>
        <SlowDataWidget />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <AnotherSlowWidget />
      </Suspense>
    </div>
  );
}

Пользователь видит контент поблочно, по мере его готовности на сервере, без необходимости ждать самый медленный запрос.

Стратегии тестирования

Тестирование Server Components

Server Components — это обычные async-функции, возвращающие JSX. Их можно тестировать через рендеринг результата:

// __tests__/product-list.test.tsx
import { render, screen } from "@testing-library/react";
import ProductList from "@/app/products/page";

// Мокаем базу данных
jest.mock("@/lib/database", () => ({
  db: {
    product: {
      findMany: jest.fn().mockResolvedValue([
        { id: 1, name: "Товар 1", price: 1000 },
        { id: 2, name: "Товар 2", price: 2000 },
      ]),
    },
  },
}));

test("отображает список товаров", async () => {
  const Component = await ProductList();
  render(Component);

  expect(screen.getByText("Товар 1")).toBeInTheDocument();
  expect(screen.getByText("Товар 2")).toBeInTheDocument();
});

Тестирование Client Components

Client Components тестируются стандартно через React Testing Library:

// __tests__/product-filter.test.tsx
import { render, screen, fireEvent } from "@testing-library/react";
import { ProductFilter } from "@/components/product-filter";

test("переключает фильтр категории", () => {
  render(<ProductFilter categories={["Электроника", "Одежда"]} />);

  const button = screen.getByText("Электроника");
  fireEvent.click(button);

  expect(button).toHaveClass("bg-blue-600");
});

Интеграционное тестирование

Для тестирования взаимодействия серверных и клиентских компонентов используйте E2E-фреймворки (Playwright, Cypress) и Next.js test mode.

Заключение

Server Components и Client Components — это не противоположности, а взаимодополняющие инструменты. Вот краткая сводка правил:

1. По умолчанию — Server Component. Не добавляйте 'use client' без необходимости.
2. Минимизируйте клиентские границы. Выносите интерактивность в маленькие leaf-компоненты.
3. Передавайте данные через пропсы. Загружайте в серверном родителе, используйте в клиентском потомке.
4. Используйте children-паттерн. Он позволяет сохранить серверный контент внутри клиентской обёртки.
5. Сериализуйте всё. Передавайте только примитивы и простые объекты.

Освоение этих паттернов — один из самых значимых навыков для современного React-разработчика. Если вашему проекту нужна экспертная React-разработка с правильным использованием Server Components, обращайтесь к нашей команде.

Рекомендуем также изучить наш гайд по Server Actions — они тесно связаны с Server Components и открывают новые возможности для работы с данными.