استراتژی های کش کردن دیتا در Next.js برای افزایش سرعت وب اپلیکیشن ها

کشینگ توی Next.js فقط برای صرفه‌جویی در زمان نیست — این کار باعث میشه درخواست‌های تکراری شبکه رو کم کنید، داده‌ها رو همیشه تازه نگه دارید، حالا چه بخواید داده‌هاتون رو برای مدت طولانی توی کش نگه دارید یا فقط وقتی نیاز شد اون‌ها رو تازه کنید، Next.js همه ابزارهای لازم رو در اختیارتون میذاره. توی این مقاله، میخوایم یاد بگیریم چطور از کشینگ توی Next.js به بهترین شکل استفاده کنیم.

فریمورک Next.js قابلیت‌های fetch API رو تقویت کرده تا دستتون رو توی کش کردن داده‌ها باز بذاره. با گزینه‌های ساده‌ای مثل cache: 'no-store' و cache: 'force-cache'، خیلی راحت می‌تونید مشخص کنید که داده‌هاتون چه زمانی و چطوری کش بشن.

دیتای همیشه تازه با cache: 'no-store'

می‌خواید هر دفعه داده‌ها رو به‌روز و تازه بگیرید؟ cache: 'no-store' انتخاب درستیه. این گزینه توی fetch کلاً کش رو نادیده می‌گیره و هر بار درخواست جدیدی می‌فرسته تا آخرین داده‌ها رو دریافت کنه. این گزینه زمانی که به دقت لحظه‌ای نیاز دارید فوق‌العادس.

نکته: می‌تونید از unstable_noStore() هم استفاده کنید اگه می‌خواید کش رو توی یک کامپوننت نادیده بگیرید. اما دقت کنید که این سینتکس ممکنه در آینده تغییر کنه، پس بهتره برای پایداری از cache: 'no-store' استفاده کنید.

استفاده مجدد از دیتای از قبل کش شده

از اون طرف، اگه مشکلی با استفاده از داده‌های کش‌شده ندارید (مثلاً برای محتوای استاتیک که زیاد تغییر نمی‌کنه)، cache: 'force-cache' انتخاب خوبیه. این گزینه پاسخ رو ذخیره می‌کنه تا دفعه بعد بتونید ازش استفاده کنید و درخواست‌های اضافی شبکه رو نادیده می‌گیره.

نکته: unstable_cache هم داده‌ها رو کش می‌کنه، اما استفاده از cache: 'force-cache' که گزینه پایدارتره، اگه می‌خواید در آینده با مشکلات پیش‌بینی‌نشده مواجه نشید، انتخاب مطمئن‌تریه.
جلوتر از این متدها هم مثال خواهم زد.

در عکس بالا میبینیم که وقتی از force cache استفاده میکنیم برای بار اول که هنوز دیتایی کش نشده میره از سرور میگیره و تو راه برگشتش به کلاینت توی مموری کش میشه و دفعه ی بعد دیگه از همون مموری برمیداره و اصن ریکوست جدیدی سمت سرور نمیره.
و وقتی که no store رو استفاده میکنیم کلا چه کش شده باشه چه نشده باشه مموری رو اسکیپ میکنه و میره مستقیم از سرور هر سری دیتای جدید میگیره.

تازه نگه‌داشتن داده‌ها با ریوَلیداشن (Revalidation)

گاهی اوقات داده‌های کش‌شده نیاز به یه بروزرسانی دارن — ممکنه بعد از یه مدت زمان خاص یا به خاطر یه رویداد خاص لازم بشه تازه بشن. خوشبختانه، Next.js چندین روش برای ریولید کردن (بروزرسانی) داده‌های کش‌شده در اختیار شما می‌ذاره.

مثلا شما میای بلاگ پست هارو از مموری کش میگیری و نشون میدی و حالا یه بلاگ جدید که به دیتابیس اضافه بشه دیگه چون از مموری دیتای قدیمی کش شده رو برمیداریم این بلاگ پست جدید رو به ما همچنان نشون نمیده. اینجاس که باید یه مکانیسمی برای پاک کردن مموری کش داشته باشیم تا دیتای تازه رو از سرور بره بگیره.

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

بروزرسانی با زمان: next.revalidate

اگه داده‌های شما نیاز دارن که به‌صورت دوره‌ای (مثل هر ساعت یا هر روز) بروزرسانی بشن، می‌تونید از گزینه next.revalidate توی درخواست fetch استفاده کنید. این کار باعث میشه بعد از مدت زمانی که مشخص می‌کنید، آخرین داده‌ها رو بگیره، در حالی که بقیه‌ی زمان داده‌ها از کش استفاده می‌کنن.

توی عکس بالا میبینیم که زمان بروزرسانی رو گذاشتیم رو ۶۰ ثانیه و حالا اگه در کمتر از ۶۰ ثانیه هرچندبار هم ریکوست زده بشه از مموری کش استفاده میکنه ولی اگه از ۶۰ ثانیه گذشته باشه میبینه دیتای توی مموری کهنه اس پس میره برای بروزسانی از سرور دیتای جدید میگیری برمیگردونه و تو راه اون دیتای جدید رو هم برای ۶۰ ثانیه بعدی کش میکنه.

اینم مثال کدش:

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  
  // Revalidate data every hour (3600 seconds)
});

بروزرسانی داده‌ها به‌صورت آنی با تگ‌ها: revalidateTag

حالا تصور کنید که می‌تونید به Next.js بگید تا بخش‌های خاصی از داده‌های کش‌شده رو فقط وقتی که یه اتفاق مهم می‌افته بروزرسانی کنه — مثلاً وقتی یه فرم ارسال میشه یا یه پست وبلاگ جدید منتشر میشه. شما می‌تونید به داده‌های کش‌شده‌تون تگ اختصاص بدید و هر وقت که لازم بود، اون تگ‌ها رو ریولید (بروزرسانی) کنید.

توی عکس بالا میبینیم که به یکی از دیتاهامون یه تگ a دادیم و درواقع اسم گذاریش کردیم و بعدش هروقت متد revalidateTag رو صدا کنیم و اسم تگ دیتامون رو بدیم میره دیتاشو از مموری کش پاک میکنه تا سری بعد که همون دیتا دوباره ریکوست زده شد بره دیتای جدید از سرور بگیره بیاره.

اینطوری می‌تونید بخش‌های خاصی از کش رو به‌صورت دستی و آنی بروزرسانی کنید، بدون اینکه منتظر زمان‌بندی بعدی برای ریولید شدن بمونید.

استفاده از متدهای ناپایدار (Unstable Methods)

اگه از اون آدمای کنجکاو هستید، می‌تونید مستقیماً از متدهای unstable_noStore و unstable_cache توی کامپوننت‌ها استفاده کنید تا کش رو مدیریت کنید. فقط یادتون باشه که این متدها به خاطر ناپایدار بودنشون ممکنه در آینده تغییر کنن (یا حتی شاید همین حالا که دارید اینو می‌خونید، تغییر کرده باشن سینتکسشون!).

یا اگه طرفدار کشینگ هستید، اینم طرز استفاده از unstable_cache:

دیگه لازم نیست داده رو توی کامپوننت‌های مختلف بارها و بارها درخواست بدید!

اگه توی چندین کامپوننت (مثل Layout، Page و چند تا کامپوننت داخلی) از همون داده استفاده می‌کنید، لازم نیست داده رو یک‌بار بالا بگیرید و هی به کامپوننت‌های دیگه پاس بدید یا مجبور باشید توی هر کامپوننت جداگانه درخواست بزنید که باعث کاهش سرعت بشه. نکست‌جی‌اس به‌طور خودکار درخواست‌های fetch رو توی سرور رندرینگ ذخیره می‌کنه، یعنی اگه همون داده رو چند بار درخواست کنید، فقط یک‌بار به شبکه دسترسی پیدا می‌کنه و نتیجه رو بین کامپوننت‌های مختلف به اشتراک می‌ذاره مگه اینکه برای اون دیتا از no-store استفاده کنید.

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

جمع‌بندی

فریمورک Next.js همه ابزارهای لازم رو برای مدیریت کشینگ به بهترین شکل در اختیارتون می‌ذاره؛ چه با استفاده از گزینه‌های fetch API مثل cache: 'no-store' و cache: 'force-cache'، یا با استفاده از متدهایی که هنوز پایدار نیستند مثل unstable_noStore و unstable_cache. با اضافه کردن استراتژی‌های بروزرسانی مثل next.revalidate و revalidateTag، همه چیز رو برای تازه نگه‌داشتن داده‌ها دارید، اونم بدون اینکه سختی بکشید یا برنامه‌تون کند بشه.

منبع:
داکیومنت caching در سایت رسمی Next.js