راهنمای کامل React Server Components
در Next.js 15

۱. RSC چیست و چرا اهمیت دارد؟

React Server Components یکی از مهم‌ترین تحولات معماری در اکوسیستم React است. با معرفی RSC، مرز بین رندر سمت سرور و سمت کلاینت کاملاً بازتعریف شده است.

"RSC به شما اجازه می‌دهد کامپوننت‌هایی بنویسید که مستقیماً روی سرور اجرا می‌شوند — بدون اینکه حتی یک بایت JavaScript به مرورگر ارسال شود."

مزیت اصلی این رویکرد کاهش چشمگیر Bundle Size و بهبود عملکرد اولیه صفحه است. داده‌ها مستقیماً از دیتابیس یا API روی سرور fetch می‌شوند.

تفاوت Server و Client Components

کامپوننت‌های سرور به منابعی مانند فایل‌سیستم، دیتابیس و متغیرهای محیطی خصوصی دسترسی دارند. در مقابل، کامپوننت‌های کلاینت به state، event listener و Browser API نیاز دارند.

// Server Component (پیش‌فرض در App Router)
async function ProductList() {
  const products = await db.product.findMany(); // مستقیم از DB
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

۲. معماری RSC در Next.js 15

Next.js 15 با معرفی App Router، RSC را به عنوان پیش‌فرض معرفی کرد. تمام کامپوننت‌های داخل پوشه app/ به طور پیش‌فرض Server Component هستند.

App Router و Server Components

ساختار جدید App Router یک مدل ذهنی روشن ارائه می‌دهد: هر چیزی که نیاز به تعامل کاربر دارد باید Client Component باشد و بقیه می‌توانند Server Component باشند.

// Client Component
'use client';
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

۳. الگوهای عملی و کد نمونه

یکی از الگوهای رایج ترکیب Server Component برای fetch داده و Client Component برای تعامل است:

• داده‌های استاتیک را با Server Components رندر کنید
• بخش‌های Interactive را با 'use client' علامت بزنید
• از Suspense برای loading state استفاده کنید
• برای streaming داده از loading.tsx استفاده کنید

۴. بهترین شیوه‌ها و Anti-patterns

اشتباه رایج: import کردن Server Component داخل Client Component — این کار ممکن نیست. به جای آن از props یا children استفاده کنید.

۵. جمع‌بندی

React Server Components یک تحول اساسی در نحوه فکر کردن درباره رندرینگ است. با درک صحیح این مدل، می‌توانید اپلیکیشن‌هایی بسازید که هم سریع هستند، هم قابل نگهداری.