آشنایی با React Server Components: تحول بزرگ در توسعه وب با React

ری‌اکت (React) در طول دهه گذشته به یکی از قدرتمندترین ابزارها برای ساخت اپلیکیشن‌های وب تبدیل شده است. این کتابخانه، که در ابتدا با کامپوننت‌های کلاسیک و پیچیده کار خود را آغاز کرد، حالا با ویژگی‌های پیشرفته‌تری همچون hooks و React Server Components (RSCs)، نحوه توسعه وب را متحول کرده است.

 

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

 

 

React Server Components چیست؟

ری‌اکت سرور کامپوننت‌ها (RSCs) رویکردی جدید در توسعه اپلیکیشن‌های React هستند که برخلاف کامپوننت‌های معمولی که در مرورگر اجرا می‌شوند، مستقیماً روی سرور اجرا می‌شوند.

یکی از کاربران ردیت، ExternalBison54، در این خصوص می‌گوید:

 

“به نظر من، RSCها به نوعی معادل کامپوننت‌سازی سمت سرور هستند. همان کاری که ری‌اکت برای سمت کلاینت انجام داد، این ویژگی حالا برای سرور انجام می‌دهد. این قابلیت می‌تواند نیاز به ابزارهایی مانند REST و GraphQL را تا حد زیادی از بین ببرد و یکپارچگی بسیار بیشتری بین سرور و کلاینت ایجاد کند.”

 

اجرای RSCها روی سرور، دسترسی مستقیم و کارآمد به منابع بک‌اند، مانند دیتابیس‌ها و APIها، را ممکن می‌سازد و نیازی به لایه‌های اضافی برای واکشی داده‌ها را حذف می‌کند.

 

چرا به React Server Components نیاز داریم؟

 

برای درک اهمیت RSCها، باید ابتدا به مرور نحوه کارکرد سنتی React بپردازیم.

 

React سنتی: رندرینگ سمت کلاینت (CSR)

ری‌اکت در اصل یک کتابخانه سمت کلاینت است. در این روش، رابط کاربری به قطعات کوچک‌تر و مستقل، یعنی کامپوننت‌ها، تقسیم می‌شود. این کامپوننت‌ها کدهای جاوااسکریپتی هستند که هنگام بارگذاری وب‌سایت، مستقیماً در مرورگر کاربر اجرا می‌شوند.

 

فرآیند CSR به این صورت است:

 

مرورگر HTML، جاوااسکریپت، CSS و سایر فایل‌ها را دانلود می‌کند.

ری‌اکت این فایل‌ها را تحلیل کرده و کامپوننت‌ها را رندر می‌کند.

وب‌سایت تبدیل به یک اپلیکیشن کاملاً تعاملی می‌شود.

اگرچه این روش مزایای خود را دارد، اما مشکلاتی نیز ایجاد می‌کند:

 

سرعت پایین بارگذاری اولیه: در اپلیکیشن‌های بزرگ و پیچیده، کاربران باید تا زمان دانلود کامل فایل‌ها صبر کنند.

ضعف در SEO: HTML اولیه معمولاً محتوای کمی دارد و برای تکمیل نیاز به جاوااسکریپت دارد، که می‌تواند باعث شود موتورهای جستجو نتوانند صفحه را به‌درستی شناسایی کنند.

عملکرد ضعیف در دستگاه‌های ضعیف‌تر: پردازش کلاینتی جاوااسکریپت می‌تواند منابع دستگاه کاربر را تحت فشار قرار دهد.

رندرینگ سمت سرور (SSR): راه‌حل موقتی برای رفع مشکلات CSR، جامعه ری‌اکت به سمت رندرینگ سمت سرور (SSR) حرکت کرد. در SSR، سرور ابتدا HTML را برای هر درخواست رندر می‌کند و سپس آن را به مرورگر ارسال می‌کند.

 

این روش مزایای زیر را به همراه داشت:

 

سرعت بارگذاری اولیه بیشتر: کاربر HTML کامل را دریافت می‌کند، که باعث می‌شود صفحه سریع‌تر ظاهر شود.

بهبود SEO: موتورهای جستجو به راحتی می‌توانند محتوای رندر شده را ایندکس کنند.

عملکرد بهتر در دستگاه‌های ضعیف: سرور پردازش سنگین را انجام می‌دهد و فشار کمتری روی دستگاه کاربر وارد می‌شود.

با این حال، SSR مشکلات جدیدی نیز به همراه داشت:

زمان طولانی برای تعامل (TTI): فرآیند “هیدریشن” (فعال‌سازی HTML) زمان‌بر است و تا تکمیل آن، کاربر نمی‌تواند با اپلیکیشن تعامل داشته باشد.

بار سنگین روی سرور: پردازش همه درخواست‌ها روی سرور می‌تواند به کاهش سرعت پاسخ‌دهی منجر شود.

پیچیدگی تنظیمات: راه‌اندازی و مدیریت SSR برای اپلیکیشن‌های بزرگ چالش‌برانگیز است.

 

RSC: راه‌حل نهایی React

در دسامبر 2020، تیم ری‌اکت ویژگی جدیدی با عنوان “Zero-Bundle-Size React Server Components” معرفی کرد.

 

RSCها بسیاری از مشکلات CSR و SSR را حل کرده‌اند و عملکرد React را به طور چشمگیری بهبود بخشیده‌اند. به گفته ExternalBison54:

 

“با RSCها، ری‌اکت به یک فریمورک کاملاً سمت سرور و کاملاً سمت کلاینت تبدیل می‌شود. این موضوع به یکپارچگی بسیار بیشتری بین کدهای سرور و کلاینت منجر شده است.”

 

مزایای React Server Components

 

1. کاهش حجم فایل‌ها (Zero Bundle Size)

RSCها تماماً روی سرور اجرا می‌شوند و نیازی به ارسال کد جاوااسکریپت به کلاینت ندارند. این ویژگی باعث می‌شود:

حجم کد جاوااسکریپت ارسالی به مرورگر کاهش یابد.

صفحات سریع‌تر بارگذاری شوند.

اپلیکیشن‌ها روی دستگاه‌های ضعیف‌تر بهتر اجرا شوند.

 

2. دسترسی مستقیم به بک‌اند

RSCها می‌توانند به‌طور مستقیم به دیتابیس‌ها و فایل‌سیستم‌ها دسترسی داشته باشند.

برای مثال، کد زیر مستقیماً داده‌ها را از دیتابیس واکشی می‌کند:

javascript
Copy code
async function CourseList() {
const db = await connectToDatabase();
const courses = await db.query(‘SELECT * FROM courses’);

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

در مقایسه با SSR، این روش نیاز به تعریف APIهای جداگانه برای هر درخواست را حذف می‌کند.

 

3. جداسازی خودکار کدها

React به‌طور خودکار کدهای موردنیاز سرور را جدا کرده و تنها کدهای کلاینتی را به مرورگر ارسال می‌کند.

 

4. کاهش “اثر آبشاری” و بهبود رندرینگ استریمینگ

 

در RSCها، کامپوننت‌ها می‌توانند به صورت مستقل و موازی داده‌های خود را واکشی کنند و سرور می‌تواند به محض آماده شدن هر بخش، HTML آن را به مرورگر ارسال کند.

 

5. هماهنگی بهتر بین کامپوننت‌های کلاینتی و سروری

 

RSCها به شما امکان می‌دهند انتخاب کنید کدام کامپوننت‌ها روی سرور و کدام روی کلاینت اجرا شوند.

 

برای مثال، در یک اپلیکیشن فروشگاهی:

 

کامپوننت‌های سروری می‌توانند داده‌های محصول را واکشی و صفحه را رندر کنند.

 

کامپوننت‌های کلاینتی می‌توانند تعاملاتی مثل افزودن به سبد خرید را مدیریت کنند.

 

آیا باید از React Server Components استفاده کنیم؟

 

پاسخ این سوال بستگی به نیاز اپلیکیشن شما دارد. اگر اپلیکیشن فعلی شما به خوبی کار می‌کند، اضافه کردن RSCها ممکن است ضروری نباشد. اما اگر به دنبال بهبود عملکرد، بهینه‌سازی تجربه کاربر، و کاهش پیچیدگی هستید، می‌توانید استفاده از RSCها را در برنامه کاری خود قرار دهید.

 

سرور قدرتمند برای تست RSCها لازم دارید؟

با یک VPS از DreamHost، می‌توانید اپلیکیشن‌های خود را بدون نگرانی از مدیریت سرور، راه‌اندازی و آزمایش کنید.