Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке React Server Components (RSC)?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке 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` або DB напряму) | Є! Серверні компоненти можуть читати файли, бази тощо |

---

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

1. **Менше JS на клієнті**
  - Серверні компоненти **не потрапляють у бандл**,
  а отже, браузер не витрачає час на завантаження і парсинг їхнього коду.
2. **Менше мережевих запитів**
  - Сервер може об'єднати запити (fetch / DB) і повернути готові дані.
3. **Швидший перший рендер**
  - Клієнт отримує вже готовий HTML + серіалізовані props.
4. **Плавне оновлення**
  - 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 (форми, кліки, фільтри);
- використовується local state, ефекти, браузерні API (window, document);
- компонент залежить від дій користувача.

---

## Підсумок

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

---

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати875 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.