درود فراوان دوستان 🖐🏼 من امیررضا ریاحی هستم. امروز قراره با هم راجب یک کانسپت مهم در ری‌اکت صحبت کنیم. میخوایم باهم ببینیم React Server Components چیه و کاربردش در ری‌اکت رو باهم بررسی کنیم.این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که شامل مجموعه‌ای از پست‌های کوتاه و کاربردی ری‌اکتی میشه.

 

کامپوننت سروری (RSC) چیه؟ 🧐

خب اگه بخوایم بصورت کوتاه یک تعریفی برای این مفهوم در نظر بگیریم میتونیم بگیم کامپوننت‌هایی که قابلیت واکشی دیتا بصورت مستقیم از سرور رو دارن. در معماری سنتی ری‌اکت، تمام کامپوننت‌ها در مرورگر ران میشن اما با RSC میتونین کامپوننت‌هایی بسازین که فقط در سرور اجرا میشن و خروجی HTML اونها به کلاینت ارسال میشه.این کامپوننت‌ها :

  • دسترسی مستقیم به ریسورس سرور دارن مثلا پایگاه‌ داده یا فایل ها و...
  • در کلاینت اجرا نمیشن و کد اونها به مرور ارسال نمیشه
  • از هوک‌های ری‌اکت مثل useState  و useEffect و... استفاده نمیکنن

 

چجوری RSC کار میکنه؟🤔

بذارین خیلی ساده و کوتاه بهتون بگم. در مرحله اول کامپوننت‌های سروری در سرور اجرا میشن و HTML تولید میکنن.در مرحله بعد، این HTML به مرورگرِ کاربر ارسال میشه.و در مرحله آخر، کامپوننت‌های کلاینتی (که نیاز به تعامل با کاربر دارن) در مرورگر به اجرا درمیان و به HTML اضاف میشن.این تقسیم‌بندی باعث میشه بخش های غیر‌تعامل‌پذیر در سرور رندر بشن و فقط بخش‌های تعاملی به کلاینت ارسال بشن.

استفاده از RSC یک سری مزایایی به ما میده از جمله کاهش حجم کد‌های ارسالی به کلاینت (کاربر) چون کامپوننت‌های‌سروری به مرورگر ارسال نمیشن بنابراین حجم کد JavaScript کاهش پیدا میکنه. یکی دیگه از مزایا میشه به بهبود عملکرد و سرعت بارگذاری اشاره کرد (مشخصه که با کاهش حجم کد این اتفاق میوفته😉). و البته باید به این موضوع هم اشاره کنم که با وجود کامپوننت‌های‌سروری امنیت برنامه افزایش پیدا میکنه چون کدهای حساس و اطلاعات مهم در سرور باقی میمونن و به کلاینت ارسال نمیشن. همچنین RSC باعث بهبود SEO هم میشه چون موتور های جستجو میتونن HTML تولید شده رو در سرور بهتر ایندکس‌گذاری کنن.

 

تفاوت با Server-Side Rendering (SSR) ❗

تا اینجا شاید فک کنین، RSC خیلی شبیه به SSR هست و خب این خیلی مهمه که تفاوت اونها رو بدونیم. SSR و RSC اگرچه هردو در سرور ران میشن اما یه سری تفاوت‌های کلیدی دارن 

SSR: تمام کامپوننت‌ها (حتی تعاملی) در سرور رندر میشن و بعدش در کلاینت هیدراته میشن.

RSC: فقط کامپوننت‌های غیرتعاملی در سرور رندر میشن و کامپوننت های تعاملی در کلاینت اجرا میشن که این تفاوت باعث حجم کد و بهبود عملکرد در RSC میشه.

 

نحوه استفاده از RSC ❓

در اینجا یک نمونه کد ساده از نحوه استفاده RSC براتون آماده کردم

// Server Component

export default async function ProductList() {
  const products = await fetchProductsFromDB();
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

در این مثال ProductList یک کامپوننت‌سروری هست که داده هارو از پایگاه‌داده دریافت میکنه و HTML تولید میکنه.بازم میگم این کد به مرورگر ارسال نمیشه چون بخش غیرتعاملیه و در سرور ران میشه !

⚠️ در Next.js میتونین از ورژن 13 به بالا از RSC استفاده کنین.تو این فریمورک کامپوننت‌های‌سروری بصورت پیش‌فرض در سرور اجرا میشن و برای تعریف کامپوننت‌های‌کلاینتی باید در ابتدای فایل از "use client" استفاده کنین.

برای بیشتر دیپ شدن در این مبحث میتونین به  مراجعه کنین و مثال‌های بیشتری ببینین.

 

خب دوستان رسیدیم به پایان یکی دیگه از پست‌های  و امیدوارم مفاهیم رو درست تونسته باشم منتقل کنم و یادتون نره مثل همیشه اگر سوالی داشتین در قسمت کامنت‌ها بپرسید حتما پاسخ داده میشه 🖐🏼