React: Что такое Server Components в Next.js и как они помогают уменьшить объем JS-бандла, отправляемого клиенту?
Server Components (серверные компоненты) — это концепция React, впервые полноценно реализованная в Next.js 13+ с App Router. Главная идея: часть компонентов рендерится исключительно на сервере и никогда не попадает в JavaScript-бандл, который отправляется клиенту.
## Как работают Server Components
По умолчанию в App Router все компоненты являются серверными. Они выполняются на сервере во время запроса (или при сборке), формируют HTML и передают его клиенту. Клиент получает готовую разметку, а не код компонента.
Чтобы сделать компонент клиентским, нужно явно указать директиву `’use client’` в начале файла. Только такие компоненты включаются в JS-бандл.
## Почему уменьшается JS-бандл
1. **Код серверных компонентов не отправляется клиенту.** Если компонент использует тяжёлую библиотеку (например, `moment.js`, `lodash`, парсер markdown), она тоже не попадает в бандл — она нужна только серверу.
2. **Меньше гидратации.** Клиентская гидратация (процесс, при котором React «оживляет» HTML, добавляя обработчики событий) требуется только для клиентских компонентов. Серверные компоненты не нуждаются в ней.
3. **Разделение ответственности.** Логика работы с базой данных, файловой системой, секретными ключами остаётся на сервере — нет риска случайно включить чувствительный код в бандл.
## Практический пример
jsx
// app/page.tsx — серверный компонент по умолчанию
import { db } from ‘@/lib/db’; // не попадёт в бандл
export default async function Page() {
const posts = await db.getPosts(); // прямой запрос к БД
return
- {posts.map(p =>
- {p.title}
)}
;
}
В этом примере `db` и весь код компонента выполняются на сервере. Клиент получает только HTML-список.
## Ограничения Server Components
— Нельзя использовать хуки (`useState`, `useEffect`) — они работают только на клиенте.
— Нельзя добавлять обработчики событий (`onClick`, `onChange`).
— Нельзя обращаться к браузерным API (`window`, `document`).
## Когда использовать Client Components
Используйте `’use client’` только там, где нужна интерактивность: формы, анимации, состояние UI, работа с браузерными API.
## Итог
Server Components позволяют отправлять клиенту минимально необходимый JavaScript. Это ускоряет Time to Interactive (TTI), снижает нагрузку на устройства пользователей и улучшает показатели Core Web Vitals. Next.js App Router строится именно вокруг этой модели, делая серверный рендеринг удобным и предсказуемым.