ری‌اکت سرور کامپوننت: کار با Server Component (RSC)

سرور کامپوننت ها (RSC) فیچر جدید ری‌اکت هستن که ما اجازه میدن یه کامپوننت و فقط فقط روی سرور رندر کنیم تا دیگه نیازی نباشه کد های مربوط به اون کامپوننت روی مرورگر دانلود بشن hydrate بشن! (و از طرفی کسی دیگه کدای داخل اون کامپوننت و نمیبینه)
تو این ویدیو Server Component هارو توضیح میدیم، ویژگی ها و معایبشو بررسی میکنیم. توضیح میدیم که با use client میشه کهکامپوننتمونو تبدیل کنیم به client component که بتونیم از هوک ها استفاده کنیم و event listener attach کنیم.
اگر سوالی داشتید همینجا تو قسمت comment ها میتونید بپرسید یا داخل تلگرام به ادرس @nima_arf بهم پیام بدید.
وب سایت: react.ir
کانال تلگرام: t.me/react_ir
ایکس (توییتر): / react_ir

[@MSEIN2303]

خیلی عالی و مفید بود.ممنون از زحمات شما

[@SyedSINA]

مرسی نیما جان مثل همیشه عالی توضیح دادی 🔥🔥
یک جایی قبلا تو voice هایی که گذاشته بودی گفته بودی برای ساخت مودال میای از page استفاده میکنی، یعنی به ازای هر مودال یک پیج درست میکنی که آدرس یونیک خودشو داره و میتونی خیلی خشگل تر مودال رو مدیریت کنی
اگر میشه برای این موضوع هم یک ویدیو درست کن
جدیدا هم که نکست با parallel routes ها و slot ها این موضوع رو بهش پرداخته، به نظرم موضوع خیلی جذابی میتونه باشه

[@nima_arf]

🔥🔥🔥
بله حتما یه ویدیو براش میگیرم

[@mohammadreza5714]

دمت گرم عالی بود 😍👌

[@user-fe4lq6sj3o]

همین امروز رفتم تو داکیومنت React و گفتم این چیه باز!! این ویدیو رو آپلود کردی برگام ریخت :/ دنبال آموزشش بودم دمت گرم❤️

[@ghazaleniazi5855]

🔥🔥🔥🔥

[@tariush]

great.

[@nima_arf]

thanks mate 🔥

[@user-yi3rq7jk2r]

❣

[@hossein2391]

nice

[@nima_arf]

Thanks

[@farnoodlotfali4912]

👍

[@alifcpr]

🔥

[@ghazaleniazi5855]

خیلی خوب و کامل بود😍

[@aminda6862]

تشکر سلطان

[@aminda6862]

چقدر عالی بود نیما جان
تشکر فراوان
ویدئویی که در انتها بهش اشاره کردی رو نمیزاری؟

[@nima_arf]

نه هنوز رکوردش نکردم تنبل شدم چند وقته
میزارمش تو لیست ویدیو ها حتما ضبطش میکنم

[@aminda6862]

@@nima_arf
ممنون نیما جان
لطفا ویدئو بزار که آموزش هات بسیار مفیدن

[@user-fe4lq6sj3o]

اگه میشه توی ویدئو ها با کد نوشتن مسئله رو بهتر توضیح بده

[@nima_arf]

حتما تو ویدیو های بعدی لحاظ میکنم 👍

[@user-yi3rq7jk2r]

awsome

[@radshodam]

High level 🎚️

[@faeze.moradi8993]

تو ویدئو ssg ssr csr گفته بودین rehydration توی ssr اتفاق میوفته!اینجا گفتین نه !

[@nima_arf]

گفتم سرور کامپوننتا ری‌هایدریت نمیشن چون فقط رو سرور هستن
کلاینت کامپوننتا (که هم روی سرور رندر میشن هم روی مرورگر) هایدریت میشن

[@pouriyababaali7040]

عه الانه 😢

[@behrouzm4126]

ممنونم از محتوای خوبت. یه سوال پروفورمنسی دارم. اگر به این شکل اکثر کامپوننت ها روی سرور اجرا بشن
اگر ریکوئست ها به سرور زیاد بشن مشکل پرفورمنس پیدا نمیکنیم؟
در صورتی که اگر اکثرا روی مرورگر کاربر کامپوننت ها را اجرا کنیم این مشکل محدودیت
منابع سرور برطرف میشه.

[@nima_arf]

خب ۲ تا مسئله
۱) اگر گوشی کاربر پرچم دار نباشه و یه گوشی معمولی باشه با یه اینترنت نچندان سریع (مرورگر باید JS هارو دانلود کنه) سایتت سریع لود میشه؟ نه
۲) اگر تعداد درخواستات درحدی زیاد شدن که سرورت نتونست هندل کنه، میتونی ریسپانسارو کش کنی، صفحه هارو Static Build کنی و در اخر اگر این ها جواب نداد میتونی سخت افزار سرور و قوی تر کنی یا تعداد سرورارو زیاد کنی (اگر دوست داری بیشتر بدونی درباره vertical/horizontal scaling بخون)

[@behrouzm4126]

@@nima_arf روشی که سایت هایی مثل دیجیکالا استفاده میکنن به نظرت چطوره؟
موقع ریکوئست میان تشخیص میدن کاربره یا ربات گوگل بعد اگه کاربر بود csr تحویل میدن و اگه ربات بود برای بحث سئو میان نسخه ssr رو تحویل میدن .

[@behrouzm4126]

@@nima_arf نظرت درباره روشی که بعض پلتفرما مثل دیجیکالا انجام میدن چیه؟
میان کاربرا از ربات گوگل تشخیص میدن اگه کاربر بود بهش csr تحویل میدن اگه نه همون ssr

[@nima_arf]

دیجیکالا که خیلی کنده
دلیل اینکه از حالت SSR درش اوردن و نمیدونم ولی سرعت لودش به نسبت به یه سایت فروشگاهی درست درمون درجه یک دیگه کمه (مثلا آمازون، تازه آمازون تو ایران سرور نداره ولی سرور دیجیکالا تو ایرانه و بازم کنده)
=====
اینکه برای بات گوگل SSR کنی (دقت کن گفتم فقط بات گوگل) بی فایده‌ست چندین و چند ساله که اپ هایی که CSR هستند و گوگل میاد JS هاشونو اجرا میکنه وای میسه دام ساخته بشه بعد index میکنتشون. هم تو مستنداتش توضیح داده هم تو search console یه گزینه test my site داره که ادرس یه صفحه از وب ساییتو میدی و میره رندرش میکنه بهت HTML صفحه رو بعد از رندر شدن میدن + اسکرین شات از اینکه وقتی گوگل رندر کرد صفحه رو چی گرفت!
ولی خب این فقط برای گوگله، برای اینکه باکس خوشگل تو شبکه های اجتماعی داشته باشی وقتی کاربر یه لینک و share میکنه باید یه سری متا تگ بزاری که اونارو اگر CSR هندل کنی اون شبکه اجتماعی (مثلا تلگرام یا ایکس) چون نمیره JS و هندل کنه هیچوقت نمیبینه ولی وقتی SSR میکنی جای درستش قرار میگیره …

[@mohammadreza5714]

@@nima_arf یعنی میخوای بگی تیم گنده دیجی کالا قبلش به این موضوع فکر نکرده که گوگل اپ های csr رو هم هندل میکنه؟

[@mohammadreza5714]

ویدئوهای بعدی رو اسپویل نکن بزار سوپرایز بشیم با نوتیفش 😂🤦‍♂

[@abba3261]

میخوای پلی لیست بزن مرتب و پیوسته ویدیو ریلیز کنی؟

[@nima_arf]

دوست دارم مرتب و پیوسته ویدیو بزارم ولی خب هی کار پیش میاد و نمیشه
و خب اره در اخر چندتا پلی لیست درست میکنم چیزایی که بهم مرتبطن رو داخلش میزارم