1~
2React Server Components (RSC) نحوه ساخت برنامه‌های React را به طور اساسی تغییر داده‌اند. با انتقال منطق رندرینگ به سرور، می‌توانیم باندل JavaScript ارسالی به کلاینت را به طور قابل توجهی کاهش دهیم که منجر به زمان بارگذاری سریع‌تر و تجربه‌های کاربری بهتر می‌شود. در این مقاله، الگوهای پیشرفته و بهترین شیوه‌ها برای استفاده از RSC در سال ۲۰۲۶ را بررسی می‌کنیم.
3~
4## Server Components چیست؟
5~
6به طور سنتی، کامپوننت‌های React کاملاً در کلاینت (CSR) رندر می‌شدند یا به صورت HTML در سرور پیش‌رندر (SSR) شده و سپس در کلاینت هیدراته می‌شدند. **Server Components** به ما امکان می‌دهند کامپوننت‌ها را _منحصراً_ در سرور رندر کنیم. کد آنها هرگز به مرورگر ارسال نمی‌شود.
7~
8### مزایا
9~
101.  **اندازه باندل صفر**: وابستگی‌هایی که در Server Components استفاده می‌شوند (مانند پارسرهای مارک‌داون یا کتابخانه‌های سنگین تاریخ) در سرور باقی می‌مانند.
112.  **دسترسی مستقیم به بک‌اند**: می‌توانید مستقیماً از داخل کامپوننت خود به پایگاه داده کوئری بزنید بدون اینکه endpoint‌های API را فاش کنید.
123.  **تقسیم کد خودکار**: کامپوننت‌های کلاینت که در سمت سرور وارد می‌شوند به طور خودکار به باندل‌های جداگانه تقسیم می‌شوند.
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>کاربران</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>کاربران من</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}
79      {children} {/* این می‌تواند یک 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 /> {/* این کاملاً کار می‌کند */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## دام‌های رایج
100~
1011.  **استفاده از Context در Server Components**: Context یک مفهوم سمت کلاینت است. اگر نیاز به اشتراک‌گذاری داده در سمت سرور دارید، آن را به عنوان props ارسال کنید یا از یک کش محدوده درخواست تخصصی استفاده کنید.
1022.  **افزودن event handlers**: نمی‌توانید `onClick` یا `onChange` را به یک Server Component اضافه کنید. آن منطق به یک گره برگ Client Component عمومی تعلق دارد.
103~
104## نتیجه‌گیری
105~
106React Server Components فقط یک ویژگی نیستند؛ آنها یک تغییر پارادایم هستند. با درک مرز بین سرور و کلاینت، می‌توانید برنامه‌هایی بسازید که هم بسیار تعاملی و هم فوق‌العاده سریع هستند.
107~