تسلط بر React Server Components در سال ۲۰۲۶

React Server Components (RSC) نحوه ساخت برنامه‌های React را به طور اساسی تغییر داده‌اند. با انتقال منطق رندرینگ به سرور، می‌توانیم باندل JavaScript ارسالی به کلاینت را به طور قابل توجهی کاهش دهیم که منجر به زمان بارگذاری سریع‌تر و تجربه‌های کاربری بهتر می‌شود. در این مقاله، الگوهای پیشرفته و بهترین شیوه‌ها برای استفاده از RSC در سال ۲۰۲۶ را بررسی می‌کنیم.

Server Components چیست؟

به طور سنتی، کامپوننت‌های React کاملاً در کلاینت (CSR) رندر می‌شدند یا به صورت HTML در سرور پیش‌رندر (SSR) شده و سپس در کلاینت هیدراته می‌شدند. Server Components به ما امکان می‌دهند کامپوننت‌ها را منحصراً در سرور رندر کنیم. کد آنها هرگز به مرورگر ارسال نمی‌شود.

مزایا

1. اندازه باندل صفر: وابستگی‌هایی که در Server Components استفاده می‌شوند (مانند پارسرهای مارک‌داون یا کتابخانه‌های سنگین تاریخ) در سرور باقی می‌مانند.
2. دسترسی مستقیم به بک‌اند: می‌توانید مستقیماً از داخل کامپوننت خود به پایگاه داده کوئری بزنید بدون اینکه endpoint‌های API را فاش کنید.
3. تقسیم کد خودکار: کامپوننت‌های کلاینت که در سمت سرور وارد می‌شوند به طور خودکار به باندل‌های جداگانه تقسیم می‌شوند.

الگوی واکشی داده

با RSC، می‌توانید کامپوننت‌های خود را async کرده و مستقیماً منتظر داده بمانید.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>کاربران</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense برای استریمینگ

از آنجایی که واکشی داده می‌تواند کند باشد، کامپوننت‌های خود را در <Suspense> بپیچید تا بلافاصله یک UI جایگزین نشان داده شود در حالی که داده بارگذاری می‌شود.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>کاربران من</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

ترکیب Server و Client Components

یکی از گیج‌کننده‌ترین جنبه‌ها نحوه ترکیب کامپوننت‌های Server و Client است.

قاعده کلی: Server Components می‌توانند Client Components را وارد کنند. Client Components نمی‌توانند Server Components را مستقیماً وارد کنند. با این حال، می‌توانید یک Server Component را به عنوان children به یک Client Component ارسال کنید.

الگوی "Children"

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      شمارش: {count}
      {children} {/* این می‌تواند یک Server Component باشد! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* این کاملاً کار می‌کند */}
    </ClientWrapper>
  );
}

دام‌های رایج

1. استفاده از Context در Server Components: Context یک مفهوم سمت کلاینت است. اگر نیاز به اشتراک‌گذاری داده در سمت سرور دارید، آن را به عنوان props ارسال کنید یا از یک کش محدوده درخواست تخصصی استفاده کنید.
2. افزودن event handlers: نمی‌توانید onClick یا onChange را به یک Server Component اضافه کنید. آن منطق به یک گره برگ Client Component عمومی تعلق دارد.

نتیجه‌گیری

React Server Components فقط یک ویژگی نیستند؛ آنها یک تغییر پارادایم هستند. با درک مرز بین سرور و کلاینت، می‌توانید برنامه‌هایی بسازید که هم بسیار تعاملی و هم فوق‌العاده سریع هستند.