PassFront
  1. PassFront
  2. База знаний
  3. Рендеринг и производительность

Где рендерятся серверные компоненты?

Рендеринг и производительность

Серверные компоненты (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/эффекты/события. Интерактив остаётся клиентским компонентам.

Другие вопросы раздела