Server Components на практике: что меняется в проектах

Что такое Server Components

React Server Components (RSC) — это компоненты, которые рендерятся только на сервере. Они не попадают в JS-бандл клиента и не могут использовать useState или useEffect.

Главное преимущество — возможность работать с базой и файловой системой прямо в компоненте, без лишних API-роутов:

import { db } from "@/lib/db";
 
export async function PostsList() {
  const posts = await db.post.findMany({ orderBy: { date: "desc" } });
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Граница клиента

Когда нужна интерактивность — добавляем "use client" и компонент становится клиентским. Граница RSC ↔ Client Component сериализуется через RSC payload.

Что в нашей практике

После года работы с RSC мы заметили:

• Бандл уменьшился на 30-40% — много кода ушло на сервер
• Меньше клиентского состояния — данные грузятся сразу с разметкой
• Простая работа с БД — без оборачивания в API-роуты

Что не работает

Не все библиотеки готовы. UI-киты часто требуют клиентского контекста. Решение — оборачивать тонким клиентским адаптером и кешировать.

Итог

Server Components — это новая дефолтная модель. Использовать «use client» там, где это действительно нужно — для форм, анимаций, интерактивных виджетов.