برای درک بهتر این مفاهیم اول یه مرور به مفهوم SSR میکنیم.
حالت SSR - SERVER SIDE GENERATION
به صورت کلی ما یه کد js داریم که روی مرورگر دانلود میشه، بعد اجرا میشه و سپس Dom Element ساخته میشه و Html ساخته میشه و روی مرورگر نشسته میشه.
اگر حالا همین فرمت رو روی سرور اجرا بشه دانلود بشه ، بعد روی مرورگر نشون بده میشه Server Component
این اصل موضوع SSR هستش.
تا اینجا خیلی خلاصه SSR رو توضیح دادیم.
حالت SSG - STATIC SITE GENERATION
یه حالت کم استفاده هم داریم (البته به نظر من اما با سرعت فوق العاده سریع) به اسم SSG - Static Site Generation
حالا اگر همین فرمت اجرا رو زمانی Build بیایم صفحه رو بسازیم و html کنیم (مخصوص صفحاتی که ثابت هستن).
در واقع کد js اجرا شده و تبدیل به فایل های ذخیره شده html میشه و با هر درخواست از همون قسمت های ذخیره شده برای اجرا در مرورگر ارسال میشه به این حالت SSG میگیم
این حالت یه محدودیتم داره. اینکه فقط صفحاتی که دیتای استاتیک دارن به درد میخوره و دیتا به روز نمیشه. چون موقع build یک بار ساخته شده رفته. و برای تغییرشون دوباره باید پروژه رو build کنیم
React یه سری تابع داره که میاد اون virtual dom که ساخته رو روی سرور تبدیل به کد های html میکنه و میده به مرورگر.
virtual dom که ساخته شده رو مرورگر رو react dom client تبدیل میکنه به dom element.
در واقع یه document create element میزنه رو تک تک fiber tree node و یه سری dom element میسازه و اضافه میکنه رو dom
روی سرور ما اصلا دسترسی به api مرورگر نداریم مثلا document یا navigator ، صفحه مرورگر نداری، در واقع ما رو محیط nodejs هستیم
حالا روی سرور همین روند stream میکنه. یه html رو پرینت میکنه برمیگیردونه روی مرورگر اونو میگیره و اجرا میکنه
پس nextjs میاد reactرو روی سرور اجرا میکنه کداشو اجرا میکنه جواب رو برمیگردونه. پس سرعت لودت بیشتر میشه.
این مختصر ترین کاری که nextjs میکنه.
حالت CSR- CLIENT SIDE RENDERING
پورسه متداول رندر کردن یه صفحه مبتنی بر javascript هستش.
هر صفحه یه سری js داره که دانلود میشه روی مرورگر بعد که دانلود تموم شد خط به خط اجرا میکنه کد هارو
به شدت کنده. انقدر که من پیشنهاد میکنم اگه با react میخواید کد بزنید کلا nextjs یا هر سیستم ssr رو نصب کنید.
