React Server Components چیست و چطور با Next.js 15 پرفورمنس فرانت‌اند را بهتر می‌کند؟

2026-10-09
شایان صحرائی
بدون دیدگاه

React Server Components چیست و چرا این‌قدر در دنیای توسعه فرانت‌اند درباره آن صحبت می‌شود؟ اگر با چالش‌هایی مثل جاوااسکریپت حجیم، تاخیر در نمایش اولین محتوا، هیدریشن سنگین و افت امتیاز Core Web Vitals روبه‌رو هستید، React Server Components یا به‌اختصار RSC می‌تواند بخشی از راه‌حل باشد. در معماری جدید React و به‌ویژه در Next.js 15، بخش زیادی از رابط کاربری می‌تواند روی سرور رندر شود و فقط قسمت‌های تعاملی به مرورگر ارسال شوند. نتیجه این رویکرد، بهینه‌سازی عملکرد فرانت‌اند، کاهش زمان لود سایت و در بسیاری از پروژه‌ها بهبود سئو سایت است. طبق مستندات React، Server Components در محیطی جدا از اپ کلاینت اجرا می‌شوند و حتی می‌توانند در زمان build یا روی هر درخواست اجرا شوند. همچنین در Next.js، صفحات و layoutها در App Router به‌صورت پیش‌فرض Server Component هستند. ([react.dev](https://react.dev/reference/rsc/server-components?utm_source=openai))

بیشتر نتایج رقیب معمولاً فقط یک تعریف ساده از RSC می‌دهند یا آن را با SSR یکی می‌دانند. اما برای تصمیم فنی درست، باید تفاوت‌های معماری، مزایا، محدودیت‌ها، الگوهای پیاده‌سازی و تغییرات مهم Next.js 15 را هم بشناسید. برای مثال، Next.js 15 با پشتیبانی از React 19، تغییرات مهمی در مدل کش، request APIهای async و رفتار پیش‌فرض fetch ارائه کرده که روی استراتژی رندر و performance اثر مستقیم دارد. ([nextjs.org](https://nextjs.org/blog/next-15?utm_source=openai))

React Server Components چیست؟

اگر بخواهیم خیلی ساده توضیح دهیم، React Server Components نوعی کامپوننت هستند که روی سرور اجرا می‌شوند و کد آن‌ها به مرورگر ارسال نمی‌شود. یعنی کاربر برای نمایش آن بخش از UI، لازم نیست جاوااسکریپت مربوط به همان کامپوننت را دانلود و اجرا کند. React می‌گوید Server Components قبل از bundling و در محیطی جدا از اپ کلاینت یا حتی جدا از سرور SSR اجرا می‌شوند. همین نکته مهم باعث می‌شود آن‌ها با رندر سمت سرور کلاسیک یکی نباشند. ([react.dev](https://react.dev/reference/rsc/server-components?utm_source=openai))

در عمل، شما با RSC می‌توانید:

داده را نزدیک به منبع روی سرور بخوانید
توکن‌ها، کلیدها و منطق حساس را در مرورگر افشا نکنید
حجم جاوااسکریپت ارسالی به کاربر را کمتر کنید
بخش‌های غیرتعاملی UI را بدون hydration به کاربر برسانید
از streaming برای نمایش مرحله‌ای محتوا استفاده کنید

نکته کلیدی این است که Server Component برای تعامل مستقیم ساخته نشده است. اگر به state، event handler، useEffect یا APIهای مرورگر مثل window و localStorage نیاز داشته باشید، آن بخش باید Client Component باشد. این تفکیک در مستندات Next.js کاملاً صریح آمده است. ([nextjs.org](https://nextjs.org/docs/app/getting-started/server-and-client-components?utm_source=openai))

تفاوت RSC با SSR، CSR و Client Components

۱) تفاوت با CSR

در Client-Side Rendering، مرورگر مقدار زیادی جاوااسکریپت دانلود می‌کند، سپس داده می‌گیرد و UI را می‌سازد. این الگو برای اپلیکیشن‌های تعاملی خوب است، اما ممکن است باعث افزایش زمان لود سایت، تاخیر در نمایش محتوا و افت تجربه کاربری روی دستگاه‌های ضعیف شود.

۲) تفاوت با SSR

در SSR، HTML اولیه روی سرور تولید می‌شود و سریع‌تر دیده می‌شود، اما معمولاً برای تعاملی شدن صفحه هنوز به hydration در مرورگر نیاز دارید. React DOM Server هم دقیقاً برای تولید HTML اولیه روی سرور استفاده می‌شود. ([react.dev](https://react.dev/reference/react-dom/server?utm_source=openai))

۳) تفاوت با React Server Components

در RSC فقط HTML مطرح نیست؛ یک درخت رندرشده React از سمت سرور به کلاینت منتقل می‌شود و مهم‌تر اینکه کد Server Component به باندل مرورگر اضافه نمی‌شود. بنابراین هزینه جاوااسکریپت کلاینت پایین‌تر می‌آید. به زبان ساده، SSR بیشتر روی «تحویل سریع HTML» تمرکز دارد، ولی RSC روی «کاهش کد ارسالی به مرورگر و نزدیک‌کردن fetch به UI» هم اثر می‌گذارد. React همچنین تأکید می‌کند که Server Components الزاماً به وب‌سرور نیاز ندارند و حتی می‌توانند در build time اجرا شوند. ([react.dev](https://react.dev/reference/rsc/server-components?utm_source=openai))

۴) تفاوت با Client Components

Client Components برای تعامل ساخته شده‌اند؛ جایی که دکمه، فرم، useState، useEffect، انیمیشن، event handler یا APIهای مرورگر لازم دارید. در Next.js، با دستور "use client" مشخص می‌کنید که یک فایل باید در کلاینت اجرا شود. در مقابل، Server Components به‌صورت پیش‌فرض بدون این directive کار می‌کنند. ([nextjs.org](https://nextjs.org/docs/app/getting-started/server-and-client-components?utm_source=openai))

چرا React Server Components برای بهینه‌سازی عملکرد فرانت‌اند مهم است؟

دلیل محبوبیت این معماری فقط «مدرن بودن» نیست. مسئله اصلی، بهینه‌سازی عملکرد فرانت‌اند است. وقتی بخشی از UI روی سرور اجرا شود و جاوااسکریپت آن اصلاً به کلاینت نرسد، سه اتفاق مهم می‌افتد:

کاهش حجم باندل: مرورگر فایل‌های کمتری دانلود و parse می‌کند.
کاهش hydration: هرچه اجزای کمتری نیازمند hydration باشند، main thread سبک‌تر می‌شود.
کاهش waterfall سمت کلاینت: به‌جای fetch بعد از mount، داده می‌تواند همان‌جا در کامپوننت سرور خوانده شود.

در Next.js، استفاده از Server Components همراه با streaming باعث می‌شود کاربر زودتر بخش‌های آماده را ببیند و لازم نباشد کل صفحه منتظر تکمیل همه درخواست‌ها بماند. این موضوع برای وب‌سایت سریع‌تر و تجربه کاربری بهتر بسیار مهم است. مستندات Next.js نیز توضیح می‌دهند که اجزای سرور می‌توانند روی سرور fetch کنند، نتیجه را cache کنند و به کلاینت stream شوند. ([nextjs.org](https://nextjs.org/docs/app/getting-started/server-and-client-components?utm_source=openai))

نقش Next.js 15 در پیاده‌سازی React Server Components

Next.js 15 یکی از مهم‌ترین نسخه‌ها برای استفاده عملی از این معماری است. طبق اعلام رسمی Next.js، این نسخه با React 19 هم‌راستا شده، APIهای async request را معرفی کرده و semantics کش را تغییر داده است؛ از جمله اینکه fetch، GET route handlerها و client navigation دیگر به‌صورت پیش‌فرض cache نمی‌شوند. این تغییر برای توسعه‌دهنده مهم است، چون باید آگاهانه‌تر درباره static، dynamic و cache تصمیم بگیرد. ([nextjs.org](https://nextjs.org/blog/next-15?utm_source=openai))

همچنین در نسخه‌های بعدی شاخه 15، بهبودهای بیشتری ارائه شد؛ مثلاً در Next.js 15.1 پشتیبانی React 19 به‌صورت stable اعلام شد و در 15.2، streaming metadata معرفی شد تا metadata async صفحه، رندر را بلاک نکند. این موضوع می‌تواند در پروژه‌های محتوامحور و سئو-محور اهمیت زیادی داشته باشد. ([nextjs.org](https://nextjs.org/blog/next-15-1?utm_source=openai))

پس اگر می‌خواهید از RSC فقط در حد تئوری عبور کنید و واقعاً از آن برای کاهش زمان لود سایت و بهبود سئو سایت استفاده کنید، باید رفتار Next.js 15 را در زمینه fetch، cache، streaming و ترکیب Server/Client Components خوب بشناسید. ([nextjs.org](https://nextjs.org/blog/next-15?utm_source=openai))

مزایای اصلی React Server Components در پروژه‌های واقعی

کاهش حجم جاوااسکریپت

بزرگ‌ترین مزیت RSC این است که تمام اجزای غیرتعاملی را می‌توانید خارج از باندل کلاینت نگه دارید. در سایت‌های فروشگاهی، مجله‌ای، داشبوردهای read-heavy و صفحات landing، این مزیت کاملاً ملموس است.

داده‌گیری نزدیک به UI

به‌جای ساختن لایه‌های اضافه فقط برای اینکه داده را به کامپوننت برسانید، در بسیاری از موارد می‌توانید داده را همان‌جا در Server Component بخوانید. این الگو باعث ساده‌تر شدن کد و کاهش waterfallهای شبکه می‌شود. React در مستندات خود دقیقاً همین مزیت را نشان می‌دهد: async component می‌تواند منتظر داده بماند و React رندر را ادامه دهد. ([react.dev](https://react.dev/reference/rsc/server-components?utm_source=openai))

امنیت بیشتر برای منطق حساس

چون کد Server Component به مرورگر ارسال نمی‌شود، نگه‌داشتن دسترسی به دیتابیس، secrets و منطق حساس روی سرور ساده‌تر است. البته این به معنی بی‌نیازی از طراحی DTO و فیلتر داده نیست؛ هر داده‌ای که به Client Component پاس بدهید، باید آگاهانه و امن باشد.

بهبود سئو سایت

وقتی محتوا سریع‌تر render و ارسال شود و کاربر زودتر محتوای معنادار ببیند، شانس بهتری برای بهبود سئو سایت و تجربه کاربری خواهید داشت. RSC به‌تنهایی تضمین سئو نیست، اما در کنار SSR، metadata درست، ساختار HTML مناسب و سرعت بهتر، اثر مثبتی دارد. در Next.js 15.2 نیز streaming metadata برای جلوگیری از بلاک‌شدن رندر اضافه شده است. ([nextjs.org](https://nextjs.org/blog/next-15-2?utm_source=openai))

چه زمانی از Server Component و چه زمانی از Client Component استفاده کنیم؟

Server Component مناسب است اگر:

بخش موردنظر بیشتر نمایشی است تا تعاملی
نیاز به fetch داده از سرور، دیتابیس یا CMS دارید
می‌خواهید JS ارسالی به مرورگر را کاهش دهید
به سئوی بهتر و نمایش سریع‌تر محتوا اهمیت می‌دهید
بخش موردنظر به browser API نیاز ندارد

Client Component مناسب است اگر:

به useState یا useEffect نیاز دارید
رویدادهایی مثل onClick و onChange دارید
به localStorage، window یا DOM API نیاز دارید
رابط کاربری real-time یا تعاملی سنگین دارید

مستندات Next.js همین مرزبندی را به‌صورت رسمی پیشنهاد می‌کنند: state، event handler، lifecycle logic و browser APIها در Client Components قرار می‌گیرند. ([nextjs.org](https://nextjs.org/docs/app/getting-started/server-and-client-components?utm_source=openai))

نمونه کد در Next.js 15

در مثال زیر، لیست محصولات روی سرور رندر می‌شود، اما فیلتر تعاملی روی کلاینت قرار دارد:

// app/products/page.tsx
import ProductFilter from './ProductFilter';

async function getProducts() {
  const res = await fetch('https://example.com/api/products', {
    cache: 'no-store'
  });

  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <section>
      <h2>محصولات</h2>
      <ProductFilter products={products} />
    </section>
  );
}

// app/products/ProductFilter.tsx
'use client';

import { useMemo, useState } from 'react';

export default function ProductFilter({ products }) {
  const [query, setQuery] = useState('');

  const filtered = useMemo(() => {
    return products.filter((item) =>
      item.title.toLowerCase().includes(query.toLowerCase())
    );
  }, [products, query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="جستجوی محصول"
      />

      <ul>
        {filtered.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

در این الگو، داده‌گیری و رندر اولیه روی سرور انجام می‌شود و فقط منطق تعاملی input به کلاینت منتقل می‌شود. این دقیقاً همان ترکیبی است که برای وب‌سایت سریع‌تر و بهینه‌سازی عملکرد فرانت‌اند منطقی است. ضمن اینکه در Next.js 15، رفتار cache دیگر باید آگاهانه مدیریت شود و مستندات رسمی fetching data هم به async component و dynamic rendering اشاره می‌کنند. ([nextjs.org](https://nextjs.org/docs/15/app/getting-started/fetching-data?utm_source=openai))

اشتباهات رایج در استفاده از React Server Components

استفاده بی‌دلیل از use client: اگر همه چیز را client کنید، عملاً مزیت RSC از بین می‌رود.
انتظار تعامل از Server Component: این کامپوننت‌ها برای state و event handler ساخته نشده‌اند.
نادیده گرفتن cache: در Next.js 15 رفتار پیش‌فرض cache تغییر کرده و تصمیم‌گیری صریح اهمیت بیشتری دارد. ([nextjs.org](https://nextjs.org/blog/next-15?utm_source=openai))
ارسال داده اضافی به کلاینت: هرچه props بزرگ‌تر و غیرضروری‌تر باشند، سود performance کمتر می‌شود.
مرزبندی بد بین سرور و کلاینت: بهتر است UI تعاملی را کوچک و ایزوله نگه دارید.

آیا React Server Components همیشه بهترین انتخاب است؟

خیر. اگر اپ شما یک پنل بسیار تعاملی، real-time و وابسته به state محلی است، ممکن است همه‌چیز را نتوانید یا نخواهید با RSC حل کنید. Server Components ابزار قدرتمندی هستند، نه نسخه جادویی برای همه پروژه‌ها. بهترین نتیجه زمانی به دست می‌آید که:

بخش‌های محتوایی و غیرتعاملی را server-first طراحی کنید
بخش‌های تعاملی را به Client Componentهای کوچک تقسیم کنید
streaming، cache و fetch را آگاهانه تنظیم کنید
با Lighthouse و Web Vitals خروجی را اندازه‌گیری کنید

به بیان دیگر، سؤال درست این نیست که «آیا React Server Components مد روز است؟» بلکه این است که «آیا این صفحه یا بخش از محصول من با server-first سریع‌تر و ساده‌تر می‌شود؟»

جمع‌بندی

حالا اگر کسی از شما بپرسد React Server Components چیست، می‌توانید پاسخ دقیق‌تری بدهید: این‌ها کامپوننت‌هایی هستند که روی سرور اجرا می‌شوند، کدشان به مرورگر ارسال نمی‌شود، برای کاهش باندل کلاینت و نزدیک‌کردن داده‌گیری به UI طراحی شده‌اند و در کنار Next.js 15 می‌توانند به بهینه‌سازی عملکرد فرانت‌اند، کاهش زمان لود سایت، بهبود سئو سایت و ساخت وب‌سایت سریع‌تر کمک کنند. فقط باید تفاوتشان با SSR و Client Components را خوب بفهمید و مرز سرور و کلاینت را آگاهانه طراحی کنید. React و Next.js هر دو به‌طور رسمی این مدل را پشتیبانی می‌کنند و در App Router، Server Components نقطه شروع پیش‌فرض هستند. ([react.dev](https://react.dev/reference/rsc/server-components?utm_source=openai))

سوالات متداول

آیا React Server Components همان SSR هستند؟

نه. SSR روی تولید HTML اولیه تمرکز دارد، اما RSC علاوه بر رندر سمت سرور، باعث می‌شود کد برخی کامپوننت‌ها اصلاً به باندل مرورگر اضافه نشود. ([react.dev](https://react.dev/reference/rsc/server-components?utm_source=openai))

آیا برای استفاده از RSC حتماً به Next.js 15 نیاز داریم؟

الزاماً نه، اما Next.js 15 یکی از بهترین بسترهای عملی برای استفاده از آن است و با React 19 و قابلیت‌های مرتبط هماهنگ شده است. ([nextjs.org](https://nextjs.org/blog/next-15?utm_source=openai))

آیا Server Components می‌توانند useState یا useEffect داشته باشند؟

خیر. برای state، event handler، lifecycle و browser API باید از Client Components استفاده کنید. ([nextjs.org](https://nextjs.org/docs/app/getting-started/server-and-client-components?utm_source=openai))

آیا RSC به بهبود سئو سایت کمک می‌کند؟

به‌صورت غیرمستقیم بله؛ چون نمایش سریع‌تر محتوا، کاهش JS و بهبود performance می‌تواند به تجربه بهتر و سئوی فنی بهتر کمک کند، به‌ویژه در کنار SSR و metadata مناسب. ([nextjs.org](https://nextjs.org/docs/app/getting-started/server-and-client-components?utm_source=openai))

مهم‌ترین نکته برای شروع چیست؟

اول صفحات و بخش‌های غیرتعاملی را شناسایی کنید، آن‌ها را Server Component نگه دارید و فقط قسمت‌های واقعاً تعاملی را با "use client" به کلاینت ببرید.

درباره گروه باسکار

ارائه خدمات برنامه‌نویسی و طراحی سایت

اطلاعات تماس