چگونگی Data Fetching (واکشی دادها) در Nextjs

در nextjs مفهوم بسیار مهمی وجود داره به نام (پیش بارگذاری)pre-rendering.

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

این کار باعث SEO بهتر و performance بالاتر میشه.

برای چک کردن اینکه nextjs چگونه یک صفحه رو pre-render میکنه:

ابتدا در کروم جاوا اسکریپت رو disable کنید:

سپس این صفحه رو مشاهده کنید .

اگر صفحه ای رو با React ایجاد کرده باشید و جاوااسکریپت مرورگر غیر فعال باشه اون صفحه لود نمیشه.

برای تست این صفحه رو با غیر فعال کردن جاوااسکریپت در مرورگر ببینید .

در این لینک میتونید ببینید چه جوری js رو در مرورگر کروم غیرفعال کنید.


چگونگی pre-rendering با nextjs
چگونگی pre-rendering با nextjs
چگونگی pre-rendering بدون nextjs
چگونگی pre-rendering بدون nextjs


در nextjs برای pre-rendering دادها دو روش وجود دارد.

  1. Static Generation (SG)
  2. Server Side Generation (SSR)
تفاوت در این دو روش به زمان ایجاد html برای هر صفحه است.

در sg ابتدا pre-rendering برای هر صفحه html را در زمان build تولید می کند و بعد از اون برای هر request از همان html تولید شده استفاده میشه.


در ssr به این گونه است pre-rendering به ازای هر request تولید html انجام می دهد.


تولید html در building time
تولید html در building time
تولید html به ازای هر request
تولید html به ازای هر request


توجه داشته باشید که nextjs به شما این امکان را می دهد که برای هر یک از صفحه های خود یک نوع pre-rendering داشته باشید یا Static generation و یا Server Side Generation .


چه زمانی از SSR و چه زمانی از SG استفاده کنیم؟

پیشنهاد Nextjs این است که تا جای ممکن از Static Generation(با یا بدون داده)
استفاده شود ، زیرا صفحه یک بار ساخته شده و توسط CDN سرویس دهی می کند که این کار باعث سرعت بارگذاری بسیار بیشتری در مقابل نوع SSR می شود.

می توان از Static Generation برای صفحات مختلف بسیاری استفاده کرد.

نکته ای که در استفاده از SG باید به آن توجه داشت این است که از این نوع Pre-rendering باید برای صفحاتی استفاده کرد که نیازی به ازتباط با کاربر قبل از بارگذاری ندارند.

در واقع برای فهم بهتر این که در چه صفحه ای باید از SG و در چه صفحه ای باید از SSR استفاده کنیم یک سوال را از خود می پرسیم:

آیا می توانم صفحه را پیش از درخواست کاربر (user request) پیش بارگذاری کنم. اگر جواب بله بود باید از SG و اگر خیر بود باید از SSR استفاده کرد.

توجه داشته باشید که SG به این معنی نیست که ما نمی توانیم داده ای را از دیتابیش دریافت کنیم بلکه به این معنی است که این داده باید در زمان ساخت دریافت شده و بارگزاری شود.

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


همچنین صفحات SSR برای SEO استفاده می شوند که بسیار مهم است.


امیدوارم مفید باشه