Що таке React Server Components (RSC)?

ReactJunior~3 хв читання

Що таке React Server Components (RSC)

React Server Components - це компоненти, які виконуються на сервері, а не в браузері. Вони дозволяють React:

рендерити частину інтерфейсу на сервері (без відправки JS у браузер);
передавати результат (готовий HTML + дерево даних) на клієнт;
комбінувати серверні та клієнтські компоненти в одному дереві.

Ідея: не весь React повинен жити в браузері - частину логіки можна виконувати на сервері, заощаджуючи ресурси користувача.

Як це працює

React тепер ділить компоненти на два типи:

Тип компонента	Де виконується	Що може робити
Server Component	На сервері	Читати файли, звертатися до БД, викликати API
Client Component	У браузері	Використовувати state, ефекти, події (`useState`, `useEffect`)

Приклад (на Next.js 13+ або React 18+ RSC)

javascript

// app/page.tsx  -> це Server Component
import ProductList from './ProductList';

export default async function Page() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return (
    <div>
      <h1>Каталог товарів</h1>
      <ProductList products={products} />
    </div>
  );
}

Цей компонент:

виконується на сервері,
робить fetch прямо в React-компоненті,
повертає користувачу вже готовий UI + дані.

І все це - без завантаження JS-коду для цього компонента на клієнт.

Приклад змішаного дерева (Server + Client)

javascript

// app/page.tsx  (Server Component)
import ProductList from './ProductList';

export default async function Page() {
  const products = await getProducts();
  return <ProductList products={products} />;
}

javascript

// app/ProductList.tsx  (Client Component)
'use client'; // важливо!

import { useState } from 'react';

export default function ProductList({ products }) {
  const [filter, setFilter] = useState('');

  return (
    <>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      {products
        .filter(p => p.name.includes(filter))
        .map(p => <div key={p.id}>{p.name}</div>)}
    </>
  );
}

Тут:

Page - серверний компонент (робить запит до БД / API);
ProductList - клієнтський (інтерактивність: фільтрація, введення тощо);
React об'єднує їх в одне дерево автоматично.

Головна відмінність від класичного SSR

Особливість	SSR (Server Side Rendering)	RSC (Server Components)
Що відрендерюється	Весь React-код виконується на сервері -> HTML	Тільки частина дерева (Server Components)
Де логіка	І сервер, і клієнт дублюють код	Чіткий поділ: сервер / клієнт
Повторне використання коду	Обмежене	Компоненти можна змішувати
JS на клієнт	Весь бандл	Тільки для клієнтських компонентів
Продуктивність	Буває повільно при великих деревах	Мінімум даних і JS на клієнті
Доступ до сервера	Немає (у SSR не можна `fs` чи БД напряму)	Є! Серверні компоненти можуть читати файли, бази тощо

Як це покращує продуктивність

Менше JS на клієнті

Серверні компоненти не потрапляють у бандл, тому браузер не витрачає час на завантаження і парсинг їхнього коду.

Менше мережевих запитів

Сервер може об'єднати запити (fetch / БД) і повернути готові дані.

Швидший перший рендер

Клієнт отримує вже готовий HTML + серіалізовані props.

Плавне оновлення

React може стрімити оновлені шматки UI (Streaming SSR).

Як сервер і клієнт "спілкуються"

RSC працює завдяки React Flight Protocol - це спеціальний формат даних, де React серіалізує дерево компонентів і їхні props, а клієнт потім "відновлює" це дерево у себе.

Приклад концептуально:

javascript

Server -> React Flight Data (JSON-like structure) -> Client

Клієнтський React отримує ці дані і збирає дерево: серверні частини -> готовий HTML, клієнтські -> інтерактивні React-компоненти.

Де вже можна використовувати RSC

Підтримують:

Next.js 13+ (App Router) - перша стабільна реалізація;
Remix v2+ (у розробці);
React 19 (буде нативно).

RSC зараз - це основа архітектури Next.js App Router.

Приклад із Next.js (реальний кейс)

javascript

// app/page.tsx (Server Component)
import { getProducts } from '@/lib/db';
import ProductCard from './ProductCard';

export default async function Page() {
  const products = await getProducts();
  return (
    <div className="grid">
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

javascript

// app/ProductCard.tsx (Client Component)
'use client';
export default function ProductCard({ product }) {
  const [liked, setLiked] = useState(false);
  return (
    <div onClick={() => setLiked(!liked)}>
      {product.name} {liked ? 'Liked' : 'Like'}
    </div>
  );
}

Page не завантажується на клієнт -> миттєвий SSR ProductCard стає інтерактивним React сам оптимізує межу "сервер - клієнт"

Коли використовувати Server Components

Використовуй, якщо:

компонент тільки читає дані (з API, БД, файлу);
не використовує useState, useEffect, useRef;
не реагує на події;
потрібен тільки для SSR/рендеру даних.

Не використовуй, якщо:

потрібен інтерактивний UI (форми, кліки, фільтри);
використовується локальний state, ефекти, браузерні API (window, document);
компонент залежить від дій користувача.

Підсумок

Особливість	Опис
Де виконуються	На сервері (Node.js / Edge)
Навіщо потрібні	Зменшити JS, прискорити завантаження, дозволити доступ до серверних ресурсів
Змішування	Можна комбінувати з клієнтськими компонентами
Чого не роблять	Не використовують state, ефекти, браузерні API
Де працюють	Next.js 13+, React 19 (вбудовано)
Результат	Швидший рендер, менший бандл, "розумний" поділ відповідальності

Простими словами:

React Server Components - це спосіб змусити React виконувати частину UI прямо на сервері, відправляти користувачу вже готовий HTML, а клієнту - тільки те, що реально потрібно для інтерактивності.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.