tgoop.com/fullStackDevs/622
Last Update:
#Reactjs
#React17
قسمت اول
#قسمت2
🔹بالخره بعد این مقدمه طولانی میرسیم سر اصل مطلب و اون هدیه کریسمسی تیم توسعه ری اکت به توسعه دهندگانشه ! و اون هم چیزی نیست جز Server Components !!
تیم توسعه ری اکت بعد از انتشار نسخه 17 و انتقاداتی که بهش وارد شد ، برگ آخرش رو برای روز های پایانی سال 2020 رو کرد !
و حالا این قابلیت چیه و به چه کاری میاد ⁉️
🔸اول از همه این مورد رو بدونید که این قابلیت در حال توسعه و تحقیق هست و هنوز به طور رسمی انتشار ندادنش و فعلا تنها چیزی که ازش داریم یه ویدیو و یه مخزن کد (ریپازیتوری) هست که پیشنهاد میکنم حتما ازش کلون بگیرید و با شکل و شمایل اتفاقاتی که داخلش میوفته آشنا بشید .
https://github.com/reactjs/server-components-demo
https://youtu.be/TQQPAU21ZUw
🔹این قابلیت به طور خلاصه RSC یا React Server Components نام داره ، در ویدیو معرفی که داخل سایت داکیومنت ری اکت هم هست ، یک کامپوننت به طور دمو ساخته شده و موارد و اتفاقات این ویژگی رو در اون بررسی میکنه ، پیشنهاد میکنم حتما اون ویدیو رو از دست ندین !
❇️ به طور خلاصه مواردی که این قابلیت قراره به ری اکت اضافه کنه این موارده :
🔹اجرای RSC فقط بروی سرور بدون بانل سایز ! (باندل سایز 0 ، دقیقا مشکلی که خیلیا با ری اکت داشتند باندل سایز های حجیم بود که باعث کند شدن اون کامپوننت و در نهایت کند شدن اپلیکیشنشون میشد )
🔹شما با RSC میتوانید مستقیما به دیتا های سمت سرور دسترسی داشته باشید به این شکل که شما میتونین مستقیما روی دیتابیس کوئوری بزنید یا با میکروسرویس ها یا فایل سیستم های روی سرورتون دسترسی داشته باشید ( فقط میتونم بگم فوق العادست ! )
🔹با RSC شما میتونین تعیین کنین که کدوم کامپوننت سمت کاربر رندر بشند و کاربر فقط اون مقدار از کدی که میخواد و مورد نیازشه رو فقط مشاهده کنه ( دقیقا مشابه قابلیت های Code Spiliting و Lazy loading که ری اکت در داکیومنتش بررسی کرده بود اما این بار سمت سرور (مثل نکست ) که خیلیا ازش استفاده میکردند )
🔹استیت های شما با ریلود یا ری رندر شدن کامپوننت های سمت سرور یا RSC تون از بین نمیرن و تخریب نمیشن !
🔹کسایی که از React Lazy استفاده میکردند همزمان با اون از قابلیت به نام Suspense استفاده میکردند به این نحو که در هر حال تا زمانی که اون کامپوننت لود بشه یا حتی اگر لود نشه و خطا بخوره اون Suspense کال میشه و شما میتونین اونرو برای خودتون شخصی سازی کنین یا مثلا میتونستین لودینگ برای کامپوننتون بزارین ! و حالا این قابلیت در RSC ها هم وجود داره و اون ها به شکل واحد های استریم مانند به UI شما تزریق میشن این قابلیت میتونه به توسعه دهنده های ری اکت کمک کنه اونا تیکه تیکه به یوزر دیتا رو نشون بدن تا پرفورمنس اپلیکیشن بالاتر بره ! همه این ها با قابلیتی هم اسم و مشابه Suspense انجام میگیره !
🔹توسعه دهنده های ری اکت میتونن کد هاشونو بین سمت سرور و سمت کاربر منتشر کنند به این نحو که شمه میتونین یه کامپوننت که برای نشون دادن یه متن ثابت یا استاتیک استفاده میشه رو سمت سرور بسازید بعد اون رو سمت کاربر داینامیک کنین اینجوری دیگ تنها زمانی که این وسط تلف میشه داینامیک شدن کامپوننته نه ساختنش ! و این میتونه کولاک کنه !
▪️Zero-Bundle-Size Components
🔸اتفاقی که تا اینجا و تا همین زمانی که من برای شما مینویسم تو حوزه توسعه اپ های ری اکتی میوفتاد این بود که ما از یه سری پکیج ها استفاده میکردیم به طور مثال از Jalali Moment یا Moment برای تبدیل تاریخ هامون استفاده میکردیم یا از sanitize-html برای تمیز شدن کد های html از ckeditor یا ما بقی ادیتور ها استفاده میکردیم یا حتی خیلی از پکیج هایی که کار رو برامون راحت میکردند ولی خب همونجوری که میدونین همه این پکیج ها یک فضایی رو اشغال میکنن و زمانی که با gzip اون ها رو کامپکت میکردیم و webPack هم اون ها رو باندل میکرد به یک فضای اشغال شده ای میرسیدیم که بهش باندل سایز میگفتیم ! خب فرض کنین یه کامپوننت دارین که از هیچ کدوم از این پکیج ها استفاده نکرده بود ولی خب چون این پکیج نصب شده بود و ایمپورت شده بود باندل سایز داشت ! به طور مثال
import Momentfrom 'moment'; // 35.9K (11.2K gzipped)@fullStackDevs
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)
function Calender({text}) {
// some code for date converting and use sanitizeHtml
// for cleaning Html From Ckeditor markups !
}
BY Web Devs
Share with your friend now:
tgoop.com/fullStackDevs/622