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