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 (парсеры markdown или тяжёлые библиотеки для работы с датами), остаются на сервере.
112.  **Прямой доступ к бэкенду**: Вы можете запрашивать базу данных прямо внутри компонента, не создавая API-эндпоинты.
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Поскольку получение данных может быть медленным, оберните компоненты в `<Suspense>`, чтобы сразу показать запасной UI, пока данные загружаются.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Чередование Server и Client Components
60~
61Один из самых запутанных аспектов  -  как комбинировать Server и Client компоненты.
62~
63**Правило**: Server Components могут импортировать Client Components. Client Components _не могут_ напрямую импортировать Server Components. Однако вы можете передать Server Component как `children` в Client Component.
64~
65### Паттерн «Children»
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Типичные ошибки
100~
1011.  **Использование Context в Server Components**: Context  -  это концепция клиентской стороны. Если нужно передать данные на сервере, используйте props или специализированный кэш области запроса.
1022.  **Добавление обработчиков событий**: Нельзя добавить `onClick` или `onChange` к Server Component. Эта логика должна быть в Client Component  -  листовом узле.
103~
104## Заключение
105~
106React Server Components  -  это не просто фича; это смена парадигмы. Понимая границу между сервером и клиентом, вы можете создавать приложения, которые одновременно высокоинтерактивны и невероятно быстры.
107~