Що таке React Server Components і чому частина UI виконується на сервері

Зачіпка

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

Якщо коротко: серверні компоненти допомагають віддати готову частину інтерфейсу без зайвого JavaScript у браузер. Це особливо помітно в Next.js App Router, де один екран часто складається з суміші серверних і клієнтських компонентів.

Проста модель без складних термінів

Уявіть сторінку як набір блоків.

• Частина блоків можна зібрати на сервері, бо вони не потребують натискань, локального стану або доступу до window.
• Частина блоків повинна жити в браузері, бо вони реагують на події, мають стейт, форми або анімації.

Саме тому RSC не означає “весь UI на сервері”. Це означає, що ви можете розділити інтерфейс на дві зони відповідальності і не тягнути все в один великий клієнтський bundle.

Де це зустрічається на практиці

Новачки найчастіше бачать RSC у таких місцях:

• app/ у Next.js App Router.
• Сторінки з даними, які можна підготувати на сервері ще до рендеру в браузері.
• Компоненти, що читають дані з бази, звертаються до бекенда або збирають статичний HTML.
• Екрани, де частина дерева - серверна, а кнопки, фільтри чи форми - клієнтські.

Якщо ви вчите Next.js, то RSC - це не окремий “трюк”, а базова частина сучасної моделі рендерингу.

Чим RSC корисні

Є кілька причин, чому цей підхід став важливим:

• Менше JavaScript для браузера.
• Швидший старт сторінки для користувача.
• Зручніше розділяти дані, які можна обчислити на сервері.
• Краще контролювати межу між даними, UI і інтерактивністю.

Для навчання це особливо корисно, бо змушує мислити не лише “як зробити компонент”, а й “де він повинен виконуватися”.

Найчастіші помилки

Ось типові помилки, які роблять новачки:

1. Плутають RSC із SSR.
   • SSR описує спосіб серверного рендеру сторінки.
   • RSC описує тип компонентів і межу між сервером та клієнтом.
2. Ставлять "use client" усюди.
   • Так легко втратити переваги серверних компонентів.
3. Додають у серверний компонент код, який залежить від браузера.
   • Наприклад, window, локальний стейт або обробники подій.
4. Не відокремлюють інтерактивні частини.
   • Кнопки, форми і фільтри часто краще винести в маленькі client components.

Швидка перевірка перед комітом

• Чи справді цей компонент потребує браузера?
• Чи можна підготувати дані на сервері?
• Чи не перетворив я всю сторінку на client component без потреби?
• Чи зрозуміло, де знаходиться інтерактивність?
• Чи не використовую я browser-only API в серверному компоненті?

Підсумок

RSC - це спосіб будувати React-інтерфейси так, щоб не все виконувалося в браузері. Для початківця головна ідея проста: сервер готує те, що можна підготувати наперед, а браузер бере на себе те, що потребує взаємодії.