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

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

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

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

Контент

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

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

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

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

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

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

**React Server Components (RSC)** - це **компоненти, які виконуються на сервері, а не в браузері**,
і при цьому **інтегруються в одне дерево React** із клієнтськими компонентами.

Простіше кажучи:

> RSC - це спосіб рендерити частину React-застосунку **на сервері**,
> але при цьому залишати решту **інтерактивною на клієнті**,
> без дублювання логіки чи SSR-гідрації всього дерева.

---

## 2. Чим RSC відрізняються від SSR

| Критерій | SSR (Server-Side Rendering) | RSC (React Server Components) |
|---|---|---|
| Де виконується | Сервер генерує **HTML** | Сервер генерує **React-структуру (дерево)** |
| Що відправляється клієнту | Готовий HTML | Потік серіалізованих компонентів |
| Що робить клієнт | "Оживляє" HTML (hydration) | Об'єднує серверні і клієнтські компоненти |
| Коли виконується | При кожному запиті | Може бути при білді, при фетчі, або частково |
| Де можна писати `fetch` | Зазвичай у `getServerSideProps` | Прямо всередині компонента! |

> Тобто SSR = "рендер HTML на сервері",
> а RSC = "рендер React-компонентів на сервері без HTML".

---

## 3. Як працює механізм RSC

### Крок 1. Поділ на типи компонентів

RSC вводить **два типи компонентів**:

| Тип | Де виконується | Чи можна використовувати Hooks / DOM |
|---|---|---|
| **Server Component** | Тільки на сервері | Не можна `useState`, `useEffect`, `window`, `document` |
| **Client Component** | У браузері | Можна все (хуки, DOM, події тощо) |

Позначення в коді:

```javascript
// Це серверний компонент (за замовчуванням)
export default async function Page() {
  const data = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={data} />;
}

// Це клієнтський
"use client";

import { useState } from "react";

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? "heart" : "outline heart"}</button>;
}
```

---

### Крок 2. Серверний рендер повертає не HTML, а **React Payload**

React Server Components не відправляють HTML.
Сервер генерує **потік серіалізованих React-компонентів**, який називається **React Flight Data**.

Приклад (спрощено):

```javascript
[
  ["$","div",null,{"children":["Hello from server"]}],
  ["$","button","client:likeButton",{"children":["like"]}]
]
```

Клієнт отримує цей "JSON-потік" і **збирає дерево React** за допомогою RSC runtime.

Тобто на клієнт приходить не HTML, а "інструкції" для React про те, які компоненти відрендерити і які з них клієнтські.

---

### Крок 3. Об'єднання (гібридне дерево)

На клієнті React **об'єднує** два світи:

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

```javascript
<App>
 |-- <Header />           -> Server Component
 |-- <PostList />         -> Server Component
 |    |-- <Post />        -> Server Component
 |    `-- <LikeButton />  -> Client Component
 `-- <Footer />           -> Server Component
```

Таким чином клієнт отримує мінімум JS - тільки для `LikeButton`.
Усе інше вже відрендерено на сервері і не потребує гідрації.

---

## 4. Переваги RSC

| Перевага | Чому це круто |
|---|---|
| **Менше JS на клієнті** | Клієнту взагалі не потрібен код серверних компонентів |
| **Немає подвійного рендеру (як при SSR)** | RSC не потребує гідрації HTML - немає дублювання |
| **Гібридність** | Можна змішувати серверні і клієнтські компоненти в одному дереві |
| **Безпека** | Серверні компоненти не потрапляють на клієнт - не можна випадково "злити" ключі чи API-токени |
| **Швидший рендер великих списків / даних** | Логіка і запити виконуються на сервері, а не в браузері |
| **Сумісність зі Streaming SSR** | Можна стрімити серверні і клієнтські частини асинхронно |

---

## 5. Приклад RSC у Next.js 13+ (App Router)

```javascript
// app/page.tsx - Server Component (за замовчуванням)
import Posts from './Posts';

export default async function Page() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts').then(r => r.json());
  return (
    <main>
      <h1>Server-rendered posts</h1>
      <Posts posts={posts} />
    </main>
  );
}
```

```javascript
// app/Posts.tsx - Server Component
import LikeButton from './LikeButton';

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map(p => (
        <li key={p.id}>
          {p.title} <LikeButton />
        </li>
      ))}
    </ul>
  );
}
```

```javascript
// app/LikeButton.tsx - Client Component
"use client";

import { useState } from "react";

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "liked" : "not liked"}
    </button>
  );
}
```

Увесь список постів рендериться на сервері,
а кнопка "лайк" інтерактивна, але завантажується окремим JS-чанком.

---

## 6. RSC != SSR

| Відмінність | SSR | RSC |
|---|---|---|
| Формат виводу | HTML | React Payload (інструкції) |
| Гідрація | Обов'язкова | Не потрібна |
| Де зберігається логіка даних | У "getServerSideProps" / API | Прямо в компонентах |
| Чи можна змішувати з клієнтськими компонентами | Обмежено | Так, гібридно |
| Продуктивність | Вища, ніж CSR, але потребує подвійного рендеру | Ще вища - менше JS і менше HTML |

---

## Підсумок

**React Server Components (RSC)** - це новий фундамент React,
який:

- переносить частину логіки і рендерингу на сервер,
- залишає інтерактивність клієнту,
- прибирає потребу в "hydration" для статичних частин,
- зменшує розмір JS і прискорює завантаження сторінок,
- і дає можливість змішувати серверний і клієнтський код в одному дереві.

> Якщо SSR = "сервер генерує HTML",
> то RSC = "сервер генерує React-дерево".
> І це наближає React до **universal rendering** - розумної, гібридної моделі,
> де кожен компонент виконується там, де це вигідніше.

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

Для рев’юера

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

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