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

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

Допрацюйте відповідь до «Що таке 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
// This is a server component (the default)
export default async function Page() {
  const data = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={data} />;
}

// This is a client component
"use client";

import { useState } from "react";

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

---

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

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

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

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

Клієнт отримує цей «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 (the default)
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 шорткати863 слів

Для рев’юера

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

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