ابـراهــیم
ابـراهــیم
خواندن ۲ دقیقه·۲ سال پیش

11) آشنایی با مفهوم pre-rendering در Nextjs

آشنایی با مفهوم pre-rendering در Nextjs
آشنایی با مفهوم pre-rendering در Nextjs


در این قسمت قراره در مورد pre-rendering و انواع اون صحبت کنیم.

فریم ورک Nextjs بطور پیشفرض، pre-rendering رو برای تمامی صفحات اعمال می کنه. یعنی به جای اینکه از طریق جاوااسکریپت صفحات را نمایش بده، یک فایل html با حداقل کد جاوااسکریپت ممکن برای هر صفحه تولید می کنه.

وقتی هم که صفحه بارگذاری بشه، کدهای جاوااسکریپتش اجرا میشه تا صفحه کاملا تعاملی بشه. به این فرآیند hydration میگن


در Nextjs دو نوع pre-rendering وجود داره:

1. Static Generation (SSG)

برای هر صفحه، فایل html جداگانه ای در build time تولید می کنه و بعد از اون برای هر request از همان html تولید شده استفاده میشه. استفاده از SSG به این معنا نیست که اطلاعات از دیتابیس دریافت نمیشه؛ بلکه این اطلاعات در build time دریافت و درون فایل html قرار داده میشه.


Server Side Rendering (SSR)

به جای تولید فایل html برای تمام صفحات در build time، به ازای هر request یک فایل html تولید و ارسال میشه.


خبر خوب اینه که می تونیم از SSG و SSR به صورت ترکیبی استفاده کنیم. یعنی صفحاتی که نیاز به SSG دارن رو با SSG و بقیه صفحات رو با SSR پیاده سازی کنیم یا بلعکس.
شما در Nextjs می تونید حتی CSR رو با یکی از روش های SSG یا SSR ترکیب کنید.


از کدوم روش باید استفاده کنم؟

برای اینکه بفهمید برای کاری که انجام میدید SSG مناسبه یا SSR، باید از خودتون این سوال رو بپرسید:

می تونم این صفحه رو قبل از درخواست کاربر، رندر کنم؟

اگه جواب بله بود، از SSG استفاده کنین

اگه جواب خیر بود، از SSR استفاده کنین


توصیه Nextjs اینه که تا جای ممکن از SSG استفاده کنین. چون صفحه یک بار تولید و توسط CDN سرویس دهی میشه که سرعت بارگذاری بیشتری در مقایسه با SSR داره.

نمونه صفحاتی که می تونیم از SSG استفاده کنیم:

  • صفحات بازاریابی
  • پست های وبلاگ
  • لیست محصولات
  • مستندات


نمونه صفحاتی که می تونیم از SSR استفاده کنیم:

  • پنل های کاربری
  • بخش جستجو
  • بخش نظرات


به طور پیش فرض زمانی که برنامه رو در حالت توسعه اجرا می کنیم، تمام برنامه به صورت SSR اجرا میشه.

منبع

pre-rendering

two forms of pre-rendering

nextjsssrssg
ساده بگیر ولی دستِ کم نگیر
شاید از این پست‌ها خوشتان بیاید