در این قسمت قراره در مورد pre-rendering و انواع اون صحبت کنیم.
فریم ورک Nextjs بطور پیشفرض، pre-rendering رو برای تمامی صفحات اعمال می کنه. یعنی به جای اینکه از طریق جاوااسکریپت صفحات را نمایش بده، یک فایل html با حداقل کد جاوااسکریپت ممکن برای هر صفحه تولید می کنه.
وقتی هم که صفحه بارگذاری بشه، کدهای جاوااسکریپتش اجرا میشه تا صفحه کاملا تعاملی بشه. به این فرآیند hydration میگن
در Nextjs دو نوع pre-rendering وجود داره:
برای هر صفحه، فایل html جداگانه ای در build time تولید می کنه و بعد از اون برای هر request از همان html تولید شده استفاده میشه. استفاده از SSG به این معنا نیست که اطلاعات از دیتابیس دریافت نمیشه؛ بلکه این اطلاعات در build time دریافت و درون فایل html قرار داده میشه.
به جای تولید فایل html برای تمام صفحات در build time، به ازای هر request یک فایل html تولید و ارسال میشه.
خبر خوب اینه که می تونیم از SSG و SSR به صورت ترکیبی استفاده کنیم. یعنی صفحاتی که نیاز به SSG دارن رو با SSG و بقیه صفحات رو با SSR پیاده سازی کنیم یا بلعکس.
شما در Nextjs می تونید حتی CSR رو با یکی از روش های SSG یا SSR ترکیب کنید.
برای اینکه بفهمید برای کاری که انجام میدید SSG مناسبه یا SSR، باید از خودتون این سوال رو بپرسید:
می تونم این صفحه رو قبل از درخواست کاربر، رندر کنم؟
اگه جواب بله بود، از SSG استفاده کنین
اگه جواب خیر بود، از SSR استفاده کنین
توصیه Nextjs اینه که تا جای ممکن از SSG استفاده کنین. چون صفحه یک بار تولید و توسط CDN سرویس دهی میشه که سرعت بارگذاری بیشتری در مقایسه با SSR داره.
به طور پیش فرض زمانی که برنامه رو در حالت توسعه اجرا می کنیم، تمام برنامه به صورت SSR اجرا میشه.
