React Server Components (RSC) چیست؟

React Server Components یا به اختصار RSC یکی از مهم‌ترین تغییرات معماری React در سال‌های اخیر است که به شما اجازه می‌دهد بخشی از کامپوننت‌ها را مستقیماً روی سرور اجرا کنید، بدون اینکه JavaScript آن‌ها به مرورگر ارسال شود.

این قابلیت به‌صورت پیش‌فرض در Next.js 13+ (App Router) فعال است و نقش بسیار مهمی در بهبود Performance، SEO و Security دارد.

مشکل React کلاسیک (Client Components)

در React قدیمی:

کل کد JavaScript به مرورگر ارسال می‌شود
Fetch دیتا در مرورگر انجام می‌شود
API Key و منطق حساس ممکن است لو برود
Time To Interactive بالا می‌رود

React Server Components برای حل همین مشکلات معرفی شدند.

آیا میدانید مدرسه پرنیان، دوره فرانت اند حرفه ای بصورت حضوری و مجازی برگزار میکند؟کلیک کنید

React Server Component دقیقاً چیست؟

یک Server Component:

فقط روی سرور اجرا می‌شود
به مرورگر JavaScript ارسال نمی‌کند
می‌تواند مستقیم به دیتابیس، فایل سیستم و API امن وصل شود
به‌صورت پیش‌فرض در Next.js فعال است

📌 هر فایلی که "use client" نداشته باشد، Server Component است.

مثال ساده Server Component

اجازه دهید با یک مثال ساده شیوه اجرای کد در سرور را با هم ببینیم.

export default async function HomePage() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const post = await res.json();


return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}

این کد روی سرور اجرا می‌شود. هیچ JavaScript به کلاینت ارسال نمی‌شود و دیتا قبل از Render آماده است.

یا میتوان با استفاده از نود جی اس، سرور کامپوننت را مستقیم به دیتابیس وصل کرد.

import db from '@/lib/db';


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


return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

Server Component چرا State ندارد؟

Server Components:

فقط برای Render اولیه هستند
تعاملی نیستند
بعد از ارسال HTML، دیگر وجود ندارند

برای تعامل، باید از Client Component استفاده شود. و اینجاست که معظل اصلی ، یعنی ترکیب ساختار ssr و csr پیدا میشود که پیشنهاد میکنیم حتما از مقاله زیر که در همین باب نگارش شده است دیدن حاصل فرمایید.

ترکیب SSR و تعامل کلاینتی در Next.js

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

اخیرا مشکلات امنیتی خاصی بروی کامپوننت های سروری مشاهده شده که برای اطلاع از آنها پیشنهاد میکنیم ویدیو زیر را تماشا کنید.

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