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

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

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

---

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

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

---

## Підсумок

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

---

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

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

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

Для рев’юера

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

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