تیم React در Dec 21 یک ویژگی جدید به نام Server Components معرفی کردند.این ویژگی هنوز به صورت آزمایشی است و هیچ داکیومنتی جز یک ویدئو معرفی در یوتیوب برای بررسی وجود ندارد.

اما اگر بخواهیم در یک جمله ساده این ویژگی رو معرفی کنیم : کامپوننت هایی با قابلیت واکشی data به صورت مستقیم از سرور.

Server Components به ما این اجازه رو میده تا در backend کامپوننت های React رو load کنیم.کامپوننت ها قبلا در backend (سمت سرور )render شدند و می توانند در برنامه به صورت یکپارچه ادغام و اجرا شوند.بنابراین میشه نتیجه گرفت که شبیه server-side rendering است اما کمی متفاوت عمل می کند.

مشابه getInitialProps  در Next.js، داده ها در  server components واکشی و به کامپوننت های front-end پاس داده می شوند.

با این وجود بر خلاف SSR قدیمی،  Server Components منعطف تر است.ما می توانیم server tree رو در حین اجرای برنامه fetch کنیم بدون اینکه state ها در سمت client از دست برود.آنها هنچنین از لحاظ فنی متفاوت هستند.در SSR کدهای جاوا اسکریپت ما به صورت Html

render  می شود.اینکار باعث ایجاد یک قالب Html می شود که بخش قابل مشاهده صفحه وب ما است.

همانطور که در تصویر زیر نشان داده شده است ، اserver components به صورت پویا در برنامه گنجانده شده و در فرم خاصی منتقل می شوند.

همه دستورالعمل های JavaScript اجرا می شوند. 1 + 1 می شود 2 که در قالب  خاص خود منتقل می شود.  کامپوننت ها static  هستند و نمی توانند تعاملی باشند. در مقایسه با SSR ، فقط قسمت قابل مشاهده منتقل می شود و دیگر تعاملی در کار نیست.

اما مزیت بزرگ Server Components چیست؟

Zero-Bundle-Size-Components

دنیای جاوا اسکریپت پر از کتابخانه های فوق العاده است. فقط به پکیج هایی مثل Moment.js فکر کنید که اندازه آنها چندین  کیلو بایت است ، اما ما فقط از چند functions اون استفاده می کنیم.این موضوع می تواند برای عملکرد برنامه و درنتیجه کاربر خیلی بد باشد.

برای save در کدی که نیازی به آن نداریم می توان از Tree-shaking استفاده کرد. آنچه باقی می ماند هنوز تعداد زیادی کد است که اغلب فقط یکبار اجرا می شوند. به عنوان مثال ، برای  format تاریخ.

به عنوان مثال، تیم React کدی را نشان می دهد که کتابخانه ای را برای render کردن Markdown ایمپورت می کنند. همانطور که مشاهده می کنید ، این کتابخانه دارای حجم زیادی است.

البته ، ما نمی خواهیم این همه کد را برای کاربر سمت front ارسال کنیم – این کار زمان و پهنای باند زیادی  را طلب مب کند.. همچنین این کتابخانه هیچ تعاملی با کامپوننت اصلی ندارد و ققط Markdown را render می کند.

نکته  قابل توجه است این است  که پسوند فایل”server.js” است. اما code base یکسان است . فقط حالا همه چیز در سرور اتفاق می افتد.بنابراین به جای ارسال تمامی کدهای کتابخانه Markdown برای client، تنها نتیجه render شده برای client فرستاده می شود.
به طور خلاصه ، server components بر روی bundle size  تاثیری ندارد. کد فقط در backend  اجرا می شود و برای کاربر قابل مشاهده نیست.

دسترسی کامل Server Components به  backend

با RSC شما می تونید به دیتا های سمت سرور دسترسی داشته باشید و  مستقیم روی دیتابیس query بزنید .همچنین می تونید  با استفاده از کتابخونه هایی مثل react-pg,  react-fetch, react-fs  به میکروسرویس ها و فایل های روی سرور دسترسی داشته باشید.

خلاصه:

Server Components اختیارات و قابلیت های زیادی رو در اختیار ما قرار میده که به طور کلی و تیتر وار میتونیم به موارد زیر اشاره کنیم:

• bundle size 0
• از بین نرفتن دیتا stateها با rerender و  reload شدن کامپوننت
• تعیین و انتخاب render شدن کامپوننت ها سمت سرور یا سمت کاربر
• نمایش دیتاهای دریافتی از سرور به صورت stream