ری اکت سرور کامپوننت چیه ؟! ( بررسی کامل React Server Component )
طراحی و ساخت رابط های کاربری توی دنیای وب، توی چند سال اخیر کلی تغییر کرده.
از روزهایی که همه چیز با HTML های استاتیک انجام میشد، تا رسیدن به Single Page App هایی که کل منطق سمت مرورگر اجرا میشه، هر مرحله با خودش یه سری مزیت و چالش داشته.
حالا React Server Components یا RSC، یه مدل جدید از ساختاردهی به اپلیکیشن های React پیشنهاد میده. مدلی که میتونه بخشی از کد رو فقط روی سرور اجرا کنه و به مرورگر ارسال نکنه.
این یعنی چی ؟!
این یعنی هم کد کمتر سمت کاربر، هم ساختاری تمیزتر برای کار با دیتا 🙂
توی این مقاله، قراره خیلی دقیق و در عین حال قابل فهم درباره RSC صحبت کنیم:
Server Component دقیقاً چیه و چه تفاوتی با SSR یا CSR داره؟
چه محدودیت هایی داره و چطوری تو پروژه های واقعی استفاده میشه؟
چه زمانی باید سراغش بریم و چه وقتی بهتره نریم؟
و مهم تر از همه: چطوری با Client Component ها ترکیب میشه؟
فرقی نداره جونیور باشی یا سینیور، این مقاله طوری نوشته شده که یه تصویر درست و کامل از RSC توی ذهنت شکل بگیره.
React Server Components دقیقاً چیه؟
React Server Component یا همون RSC، یه جور کامپوننت توی Reactـه که فقط روی سرور اجرا میشه.
یعنی چی؟ یعنی این کامپوننت توی مرورگر اجرا نمیشه، اصلاً هیچ وقت به مرورگر نمیرسه.
خروجی یه Server Component ،یه ساختار خاصیه (React Flight) که به مرورگر فرستاده میشه تا React اون رو روی کلاینت تفسیر کنه.
به زبان خیلی ساده تر:
یه Server Component مثل یه کامپوننت مخفیِ پشت صحنست که میتونه راحت به دیتابیس، فایل سیستم، یا هر چی روی سروره وصل بشه، کارش رو بکنه و فقط نتیجشو بده به مرورگر — بدون اینکه حتی یه خط کدش بیاد سمت کاربر.
چرا این خوبه؟
لازم نیست برای هر چیزی یه API جدا درست کنی.
جاوااسکریپت کمتری میره سمت مرورگر → لود سریعتره.
چون کدش اصلاً نمیره سمت کاربر، امنیت بالاتر میره.
کلی از دردسرهای مدیریت state و async توی کلاینت رو کم میکنه.
فرق Server Component و Client Component چیه؟
تا قبل از معرفی سرور کامپوننت ها، همه ی کامپوننت های React روی مرورگر (کلاینت) اجرا میشدن. به اینا می‌گیم Client Component. یعنی کل کد کامپوننت باید دانلود بشه، توی مرورگر اجرا بشه، و اگه نیاز به داده داشت باید با یه API تماس بگیره تا از سرور اطلاعات بگیره.
اما با اومدن Server Componentها، یه مدل جدید اضافه شد: حالا میتونی بعضی از کامپوننت ها رو فقط روی سرور اجرا کنی. این یعنی اون کامپوننت هیچوقت به مرورگر نمیره، فقط نتیجه ی نهایی (مثل JSX/HTML) به کلاینت فرستاده میشه.
پس فرق اصلی اینجاست:
سرور کامپوننت اصلاً جاوااسکریپتش به مرورگر فرستاده نمیشه، ولی کلاینت کامپوننت باید کامل بیاد سمت مرورگر.
سرور کامپوننت ها خیلی به درد جاهایی میخورن که میخوای مستقیم به دیتابیس وصل بشی، از یه فایل روی سرور بخونی، یا کلاً پردازش هایی انجام بدی که لازم نیست سمت کاربر انجام بشه.
مثلاً گرفتن لیست محصولات از دیتابیس یا ساختن یه HTML پیچیده.
از اون طرف، کلاینت کامپوننت ها همون هایی هستن که برای تعامل با کاربر لازمن. مثلاً وقتی کاربر رو یه دکمه کلیک میکنه، تایپ میکنه، اسکرول میکنه یا با فرمها کار میکنه — این کارا فقط با کلاینت کامپوننت ممکنه، چون اونها توی مرورگر اجرا میشن و میتونن از هوکهایی مثل useState و useEffect استفاده کنن.
یه مثال ساده:
فرض کن یه سایت فروشگاهی داری:
یه کامپوننت داری که میره لیست محصولات رو از دیتابیس میگیره و نشون میده — این کامپوننت رو میتونی به‌راحتی Server Component بنویسی، چون نیازی نیست کاربر خودش مستقیماً با اون ارتباط داشته باشه.
ولی یه کامپوننت دیگه داری که وقتی کاربر روی “افزودن به سبد خرید” کلیک میکنه، باید یه چیزی رو تغییر بده یا یه انیمیشن نشون بده — این یکی حتماً باید Client Component باشه، چون باید توی مرورگر کار کنه و با کاربر تعامل داشته باشه.
ترکیب Server و Client Components
مهم ترین بخش RSC همین ترکیبشه.
React بهت اجازه میده که توی یه Server Component از Client Component استفاده کنی. اما برعکسش مجاز نیست.
مثال واقعی:
// ServerComponent.jsx
import ProductCard from './ProductCard' // Client component
export default async function ProductList() {
const products = await db.getProducts()
return (
<div>
{products.map(p => (
<ProductCard key={p.id} product={p} />
))}
</div>
)
}
// ProductCard.jsx
'use client'
import { useState } from 'react'
export default function ProductCard({ product }) {
const [liked, setLiked] = useState(false)
return (
<div onClick={() => setLiked(!liked)}>
{product.name} {liked ? '❤️' : '🤍'}
</div>
)
}
اینجا ProductList روی سرور اجرا میشه و دیتا رو از دیتابیس میگیره.
اما ProductCard یه Client Component هست که روی مرورگر رندر میشه و اجازه داره از useState استفاده کنه.
مزایا و فواید استفاده از React Server Components
React Server Components فقط یه ویژگی جدید نیست — یه تغییر بزرگ در مدل ذهنی ساخت اپلیکیشن های React محسوب میشه. این تغییر، وقتی درست استفاده بشه، میتونه تاثیرات خیلی خوبی روی performance، معماری کد، و تجربه توسعه بده.
بیایید با هم چندتا از مهم ترین مزایای RSC رو بررسی کنیم:
1. کاهش حجم جاوااسکریپت سمت کلاینت
یکی از اصلی ترین دلایل معرفی RSC همین بود:
“فرستادن کمتر جاوااسکریپت به مرورگر = اپلیکیشن سریع تر”
وقتی یه کامپوننت فقط روی سرور اجرا بشه، دیگه نیازی نیست باندلش به مرورگر بره. این یعنی:
کاربر سریع تر صفحه رو میبینه
جاوااسکریپت کمتری باید دانلود، پارس، و اجرا بشه
رندر کلاینت سبک تر میشه و عمر باتری موبایل هم کمتر مصرف میشه
مثال واقعی:
فرض کن یه لیست بزرگ از محصولات داری که فقط باید نمایش داده بشن و هیچ تعامل خاصی باهاشون انجام نمیشه.
قبل از RSC، مجبور بودی برای گرفتن دیتا از API استفاده کنی و همه‌ی logic ها رو هم تو مرورگر هندل کنی.
الان میتونی اون لیست رو با یه Server Component بسازی و حتی 1 کیلوبایت هم جاوااسکریپت اضافی به مرورگر نفرستی.
2. ساده تر شدن کار با دیتابیس و API ها
توی Client Components، برای گرفتن دیتا معمولاً باید:
یه API endpoint بنویسی
توی کلاینت با fetch بگیری
حالت loading و error هندل کنی
دیتا رو به کامپوننت پاس بدی
اما توی Server Components میتونی به صورت مستقیم (و sync-like) از دیتا استفاده کنی:
// Server Component
export default async function ProductList() {
const products = await db.getProducts()
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
)
}
بدون API، بدون fetch، بدون پیچیدگی.
همه چیز سرراست، قابل فهم و سریع تر.
3. افزایش امنیت (کد سمت سرور به کلاینت نمیاد)
وقتی یه کامپوننت فقط روی سرور اجرا بشه، کدش هم فقط اونجاست.
یعنی حتی اگه توش اطلاعات حساس یا ساختار دیتابیس داشته باشی، اون اطلاعات هرگز وارد مرورگر کاربر نمیشن.
در مقایسه:
توی پروژه های معمولی React، کد همه‌ی کامپوننت ها به مرورگر فرستاده میشه، حتی اگه یه سری فایل به ظاهر فقط “data fetching” باشن.
4. معماری تمیزتر و بهتر برای جداسازی concerns
یکی از مشکلات رایج توی پروژه های بزرگ React اینه که همه چیز توی یه فایل جمع میشه:
گرفتن دیتا
منطق UI
مدیریت state
تعامل با کاربر
و …
با RSC میشه خیلی راحت کامپوننت هایی ساخت که فقط وظیفه گرفتن دیتا و ساختن UI اولیه رو دارن — و اون بخشی که تعامل با کاربر داره، به Client Component ها منتقل بشه.
این باعث میشه:
کدت راحت تر تست بشه
مسئولیت ها جدا بشن
کد تمیزتر و قابل نگهداری تر باشه
5. پشتیبانی از Streaming و Suspense
RSC به صورت داخلی از قابلیت Streaming پشتیبانی میکنه.
یعنی میتونه بخشی از خروجی رو به مرورگر بفرسته، حتی اگر بقیه کامپوننت ها هنوز آماده نیستن.
مثلاً:
میخوای یه لیست محصولات رو نشون بدی
دیتا آماده نیست، ولی Skeleton لود بشه
وقتی آماده شد، فقط اون بخش update بشه
با استفاده از React Suspense، این تجربه خیلی بهتر مدیریت میشه.
<Suspense fallback={<LoadingProducts />}>
<ProductList />
</Suspense>
این مزایا فقط وقتی مهم هستن که…
…بدونی کجا استفاده کنی، کجا نه.
مثلاً اگه پروژه کوچیکیه و چندتا صفحه ساده داره، RSC ممکنه بیشتر باعث پیچیدگی بشه تا سود.
ولی توی پروژه های بزرگ، پیچیده، با دیتاهای زیاد یا UIهای غیرتعامل‌محور، RSC میتونه خیلی به صرفه باشه — هم از نظر performance، هم از نظر معماری کد.
محدودیت ها و چالش های React Server Components
همونطور که گفتیم، RSC ابزار قدرتمندیه، ولی بدون محدودیت نیست. استفاده ازش نیاز به درک درست داره، چون اگه ندونی چطور باهاش کار کنی، ممکنه حتی باعث بشه اپلیکیشنت پیچیده تر، کندتر یا پر از باگ بشه.
بیایید با واقع بینانه ترین نگاه، چندتا از مهم ترین محدودیت ها و چالش های RSC رو بررسی کنیم:
1. محدود بودن به محیط سرور (Node.js)
Server Component ها فقط روی سرور اجرا میشن. این یعنی توی اونها:
به DOM دسترسی نداری
نمیتونی از Browser API ها مثل
window,localStorageوnavigatorاستفاده کنیفقط میتونی از APIهای سمت سرور مثل دیتابیس، فایل سیستم، یا توابع Node.js استفاده کنی
اگه بخوای مثلاً یه modal یا dropdown که با موس کار میکنه تو Server Component بسازی، با خطا مواجه میشی. چون اون رفتار فقط توی مرورگر ممکنه و باید توی Client Component باشه.
2. عدم پشتیبانی از هوک های تعاملی مثل useState و useEffect
Server Component ها هیچ حالت (state) یا lifecycle ندارن. پس این هوک ها توشون کار نمیکنن:
// ❌ این کد در Server Component غیرمجاز است
'use server'
import { useState, useEffect } from 'react'
export default function Test() {
const [count, setCount] = useState(0) // ❌
return <button onClick={() => setCount(count + 1)}>+</button>
}
دلیلش ساده ست: این کد قراره فقط روی سرور اجرا بشه، پس event handler یا state محلی نداره. هر چیزی که تعاملی باشه باید منتقل بشه به یک Client Component.
3. نیاز به App Router در Next.js
RSC فقط توی Next.js 13 به بعد و فقط با App Router پشتیبانی میشه.
یعنی:
پروژه هایی که از Pages Router استفاده میکنن، از RSC پشتیبانی نمیکنن
اگه بخوای از RSC استفاده کنی، باید ساختار پروژه ت رو تغییر بدی و با مفاهیم جدید App Router آشنا باشی
4. ساختار ذهنی جدید میخواد (mental model جدید)
کار کردن با RSC با React کلاسیک فرق داره. حالا باید بفهمی:
کد قراره کجا اجرا بشه (سرور یا کلاینت؟)
آیا یه کامپوننت قابل تعامل هست یا نه؟
چه داده هایی باید از سرور بیاد و چه چیزی باید تو کلاینت هندل بشه؟
این موضوع باعث میشه خیلی از توسعه دهنده ها اوایل احساس سردرگمی کنن، مخصوصاً اگه تازه کار باشن.
5. ابزارها و پکیج های ناسازگار هنوز وجود دارن
از اونجایی که RSC هنوز یه قابلیت نسبتاً جدیده، خیلی از پکیج ها هنوز به درستی ازش پشتیبانی نمیکنن.
مثال های رایج:
بعضی از UI library ها فقط با Client Components کار میکنن
کتابخونه هایی که به DOM نیاز دارن (مثلاً chart ها یا rich text editor ها) تو Server Component قابل استفاده نیستن
ابزارهای devtools یا تست هنوز کامل با RSC هماهنگ نیستن
6. کامپوننت های تودرتو گاهی باعث مشکل در ترکیب میشن
ترکیب Server و Client Components تو بعضی مواقع باعث دردسر میشه، مخصوصاً اگه وسط کار فراموش کنی که یه کامپوننت کدوم سمت اجرا میشه.
مثلاً:
// Server Component
import Chart from './Chart' // Chart یه Client Component پیچیده ست
export default function Dashboard() {
return (
<div>
<Chart data={...} /> // ممکنه مشکلات hydration پیش بیاد
</div>
)
}
برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
اینجا اگه Chart با یه سری استایل ها یا مقادیر dynamic پیچیده ترکیب بشه، ممکنه مشکلاتی مثل mismatch بین سرور و کلاینت پیش بیاد که رفع کردنش سخت باشه.
7. کد جدا، اما tightly coupled
حتی با اینکه سرور و کلاینت جدا هستن، ولی هنوز بهم وابسته ان. مثلاً:
-
یه کامپوننت سرور داره به کامپوننت کلاینت prop پاس میده
-
اگه client component یه تغییر ساختاری کنه، ممکنه سرور هم نیاز به تغییر داشته باشه
یعنی هنوز coupling وجود داره و باید با دقت ساختاردهی بشه.
چیشد که سرور کامپوننت در ری اکت معرفی شد ؟
توسعه دهنده های React دیدن که با بزرگتر شدن اپ ها، حجم JS سمت کلاینت خیلی زیاد میشه. برای همین RSC رو معرفی کردن تا بتونیم بعضی از کامپوننت هامونو بدون فرستادن کد به مرورگر اجرا کنیم.
خلاصه اینکه ..
React Server Component ها خیلی قدرتمندن، ولی بدون درک درست میتونن دردسرساز هم باشن. اگه قرار نیست از قابلیت هاشون به درستی استفاده بشه، بهتره سراغش نریم.
توی پروژه های بزرگ و حرفه ای، ارزش داره که ساختار RSC رو یاد بگیریم
اما توی پروژه های ساده یا MVP ها، ممکنه فقط باعث پیچیدگی بشه
دیدگاهتان را بنویسید