1~
2React Server Components (RSC) фундаментально змінили спосіб створення React-додатків. Переміщуючи логіку рендерингу на сервер, ми можемо значно зменшити JavaScript-бандл, що надсилається клієнту, що призводить до швидшого завантаження та кращого досвіду користувачів. У цій статті ми розглянемо просунуті патерни та найкращі практики використання RSC у 2026 році.
3~
4## Що таке Server Components?
5~
6Традиційно React-компоненти рендерились повністю на клієнті (CSR) або попередньо рендерились на сервері як HTML (SSR) і потім гідратувались на клієнті. **Server Components** дозволяють рендерити компоненти _виключно_ на сервері. Їхній код ніколи не надсилається до браузера.
7~
8### Переваги
9~
101.  **Нульовий розмір бандлу**: Залежності, що використовуються в Server Components, залишаються на сервері.
112.  **Прямий доступ до бекенду**: Можна запитувати базу даних безпосередньо в компоненті.
123.  **Автоматичне розділення коду**: Client components, імпортовані на стороні сервера, автоматично розділяються.
13~
14## Патерн Отримання Даних
15~
16З RSC ви можете зробити компоненти `async` і отримувати дані безпосередньо.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense для Стрімінгу
39~
40```tsx
41import { Suspense } from 'react';
42import UserList from './UserList';
43import LoadingSkeleton from './LoadingSkeleton';
44~
45export default function Page() {
46  return (
47    <section>
48      <h1>My Users</h1>
49      <Suspense fallback={<LoadingSkeleton />}>
50        <UserList />
51      </Suspense>
52    </section>
53  );
54}
55```
56~
57## Поєднання Server та Client Components
58~
59**Правило**: Server Components можуть імпортувати Client Components. Client Components _не можуть_ безпосередньо імпортувати Server Components. Однак ви можете передати Server Component як `children` до Client Component.
60~
61### Патерн "Children"
62~
63```tsx
64// ClientComponent.tsx
65'use client';
66~
67import { useState } from 'react';
68~
69export default function ClientWrapper({ children }) {
70  const [count, setCount] = useState(0);
71~
72  return (
73    <div onClick={() => setCount((c) => c + 1)}>
74      Count: {count}
75      {children} {/* This can be a Server Component! */}
76    </div>
77  );
78}
79```
80~
81```tsx
82// ServerPage.tsx
83import ClientWrapper from './ClientWrapper';
84import ServerContent from './ServerContent';
85~
86export default function Page() {
87  return (
88    <ClientWrapper>
89      <ServerContent /> {/* This works perfectly */}
90    </ClientWrapper>
91  );
92}
93```
94~
95## Типові Пастки
96~
971.  **Використання Context в Server Components**: Context  -  це клієнтська концепція.
982.  **Додавання Event Handlers**: Не можна додати `onClick` або `onChange` до Server Component.
99~
100## Висновок
101~
102React Server Components  -  це не просто функція; це зміна парадигми. Розуміючи межу між сервером і клієнтом, ви можете будувати додатки, які є одночасно високоінтерактивними та неймовірно швидкими.
103~