مثل همه ی زبان ها و فریم ورک ها، Nextjs هم یه سری مفاهیم اولیه داره که باید باهاشون آشنا باشیم:
محیط Development (توسعه): زمانی که ما در حال ساخت و توسعه نرم افزار هستیم، در این محیط قرار داریم. در این حالت در کنار پکیج های اصلی، ممکنه از پکیج هایی استفاده کنیم که فقط درون محیط توسعه نیازشون داریم.
محیط production (تولید): بعد از اینکه توسعه نرم افزار به پایان میرسه، برنامه وارد محیط تولید میشه تا محصول نهایی ایجاد بشه و برای کاربر قابل استفاده باشه. در این حالت تنها پکیج های مورد نیاز درون برنامه قرار می گیره و برنامه تا جای ممکن فشرده میشه تا سرعت برنامه افزایش پیدا کنه.
در ادامه ممکنه به جای استفاده از کلمه "محیط" از کلمه "حالت" برای فهم بهتر مفاهیم استفاده بشه
تفاوت Build Time & Runtime
مفهوم Build time (زمان ساخت): برای اینکه حالت تولید یک برنامه رو بسازیم، یه سری مراحل انجام میشه :
1. فایل های html مورد نیاز پروژه ساخته میشه
2. کد های جاوااسکریپت برای رندر در سمت سرور اجرا میشه
3. استایل ها و کد های جاوااسکریپت مورد نیاز هر صفحه بهش اعمال میشه
مدت زمانی که این مراحل طی میشن رو میگن Build time.
مفهوم Runtime (زمان اجرا): بعد از اینکه پروژه ساخته شد درون سرور قرار داده میشه تا کاربران ازش استفاده کنن. مدت زمانی که کاربر برای دریافت پاسخ هر درخواستش منتظر می مونه رو میگن Runtime
زمانی که صفحه اصلی لود میشه، کد های صفحات دیگه بارگیری اولیه نمیشه و فقط زمانی که به صفحه دیگه ای برید، کدهای اون صفحه بارگیری و اجرا میشه. این قضیه باعث افزایش سرعت صفحه اصلی میشه و فرقی هم نمیکنه که وبسایت شما چند صفحه داشته باشه (فقط کد های صفحه ای که درونش هستین بارگیری میشه)
به فرایند تبدیل کد های React به خروجی نهایی html برای اجرا درون مرورگر Rendering گفته میشه. Rendering می تونه به دو صورت سمت کاربر (CSR) و سمت سرور (SSR) اجرا بشه. این فرایند در React به صورت پیشفرض در سمت کاربر اجرا میشه که باعث و بانی تمام مشکلات ماست (میشه گفت اصلی ترین دلیل استفاده از Nextjs همینه)
مفاهیم دیگه ای هم از قبیل Bundling / Minifying هم وجود داره که به خاطر طولانی نشدن مطلب و اینکه اکثر افراد با این موارد آشنا هستند، آورده نشده.
