در این قسمت قراره در مورد نحوه استفاده از SSG صحبت کنیم و به صورت عملی در پروژه مون اجراش کنیم. ما می تونیم از SSG به دو صورت به همراه داده یا بدون داده استفاده کنیم:
به صورت پیش فرض Nextjs با استفاده از SSG بدون داده صفحات رو رندر میکنه. تا الان تمام صفحاتی که ایجاد کردیم، نیاز به واکشی داده نداشتن. مثلا posts.js نیاز به هیچ گونه واکشی داده (فعلا) نداره:
برای موارد شبیه به این، Nextjs فقط یک صفحه html تولید میکنه
بعضی صفحات ممکنه نیاز به دسترسی به فایل های سیستم یا گرفتن داده ها از back-end در زمان build time داشته باشن. در این مواقع، دو حالت پیش میاد:
1. محتوای صفحه شما از داده های خارجی تامین میشه: از ()getStaticProps استفاده کنید
2. مسیر (لینک) های صفحه شما به داده های خارجی بستگی داره: از ()getStaticPaths استفاده کنید. معمولا نیازه که از ()getStaticProps هم به همراهش استفاده بشه (این حالت رو در قسمت Dynamic Routes توضیح میدم)
این تابع در build time فراخوانی میشه و این امکان رو میده که داده‌های واکشی شده رو موقع pre-render درون صفحه استفاده کنید. وقتی این تابع رو درون صفحه ای فراخوانی می کنید، اساسا به Nextjs گفتید: " این صفحه وابستگی به داده های خارجی داره. وقتی این صفحه رو Pre-render میکنی، قبلش مطمئن شو که داده های خارجی رو دریافت کردی..."
از اونجایی که این تابع فقط در زمان build time اجرا میشه، نمی توانید از query param ها و درخواست های http درون این تابع استفاده کنید. در ضمن، مواظب باشید که اطلاعات حساس رو به props پاس ندید.
بیاید حالت اول رو با استفاده از این تابع انجام بدیم. images.js رو به این صورت ویرایش کنید:
ما تمام تصاویر موجود در مسیر public/images رو درون صفحه images نمایش دادیم.
در اینجا برای اینکه تصاویر رو نمایش بدیم، چهار بار از </ Images > استفاده کردیم که باعث ایجاد hard code شدیم. فعلا مشکلی وجود نداره اما اگه تعداد تصاویر دو رقمی بشه این کار اصلا بهینه نیست. می تونیم این کار رو با استفاده از ()getStaticProps به صورت ساده تر انجام بدیم. برای استفاده از این تابع images.js رو به این صورت ویرایش کنید:
در اینجا ما با استفاده از ماژول های fs و path درون ()getStaticProps نام تصاویر رو درون متغیر images به صورت آرایه ذخیره کردیم و اون درون خصوصیت props پاس دادیم. بعد با استفاده از destructuring این آرایه رو به صورت props درون کامپوننت ImagesPage دریافت کردیم. درنهایت با استفاده از حلقه map تصاویر رو درون صفحه نمایش دادیم. خروجی باید به این صورت باشه:
حالا فرقی نمی کنه که تعداد تصاویر در مسیر public/images چقدر باشه (همشون نمایش داده میشه).
درون ()getStaticProps متغیر images رو log بگیرید:
اگه به کنسول مرورگر نگاه کنید، آرایه images نمایش داده نشده. در عوض درون ترمینال نمایش داده شده:
دلیلش اینه که توابع و دستورات Nextjs در backend اجرا میشه.
اگه متغیر images رو در تابع ImagesPage لاگ بگیرید، خروجی درون مرورگر نمایش داده میشه:
