Где рендерятся серверные компоненты?
Рендеринг и производительность
Серверные компоненты (React Server Components, RSC) рендерятся только на сервере — в Node.js (или edge-рантайме) во время запроса либо на этапе сборки. Их код никогда не попадает в браузер.
Где и когда происходит рендер
- При запросе: сервер (Next.js App Router) выполняет функции серверных компонентов — с прямым доступом к БД, файлам, секретам.
- При сборке (SSG): для статических страниц те же компоненты выполняются в момент билда.
- Результат — не HTML, а RSC payload: сериализованное описание дерева (спец-формат), которое клиентский React умеет встраивать в своё дерево без потери состояния клиентских компонентов.
// выполняется только на сервере; в бандле браузера этого кода нет
const Orders = async () => {
const orders = await db.orders.findMany(); // напрямую к БД
return <OrderList orders={orders} />;
};Чем это отличается от SSR
SSR рендерит клиентские компоненты в HTML на сервере, но их JS всё равно едет в браузер и гидрируется. Серверные компоненты не гидрируются и не шлют свой код клиенту вовсе: ноль JS в бандле за них (парсер markdown, ORM — бесплатны для клиента). SSR и RSC работают вместе: серверные компоненты формируют payload, из него генерируется HTML для первого показа.
Ограничения из-за места рендера
Нет браузера — нет useState/useEffect/событий/window; нет и повторного рендера при действиях пользователя (только повторный запрос/ревалидация). Интерактивность — в клиентских компонентах ('use client'), которые серверные могут рендерить как «острова».
Коротко для собеседования
RSC рендерятся исключительно на сервере (при запросе или на билде) и передаются клиенту как сериализованный payload; их код не входит в бандл и не гидрируется — отсюда доступ к БД/секретам и ноль клиентского JS, но и запрет на state/эффекты/события. Интерактив остаётся клиентским компонентам.