اگر با فریم‌ورک Next.js برای توسعه وب‌سایت‌های استاتیک و سرور رندرینگ کار می‌کنید، حتما نیاز دارید تا با قابلیت‌های پیکربندی این فریم‌ورک آشنا شوید. یکی از قابلیت‌های بسیار مهم در Next.js، امکان کنترل و سفارشی‌سازی حافظه پنهان (Cache) است تا بتوان کارایی و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم آورد.
پیکربندی حافظه پنهان سفارشی در Next.js از طریق فایل next.config.js انجام می‌شود. این فایل به شما اجازه می‌دهد تا با تنظیمات مختلف، رفتار فایل‌های استاتیک و درخواست‌های API را کنترل کنید. امکان مدیریت حافظه پنهان به شما این قدرت را می‌دهد که برای داده‌های پویا و همچنین استاتیک، سیاست‌های متفاوتی را به کار ببندید. این ویژگی مهم می‌تواند بر روی سرعت بارگذاری و بهبود تجربه کاربری وب‌سایت شما تاثیرگذار باشد.
در این راهنما، نحوه استفاده از یک Custom Cache Handler را بررسی می‌کنیم. این قابلیت در نسخه‌های اخیر Next.js ارائه شده و به توسعه‌دهندگان اجازه می‌دهد تا کنترل دقیق‌تری بر روی درخواست‌ها و پاسخ‌ها داشته باشند.
یکی از کاربردهای رایج این قابلیت در مدیریت پاسخ‌های API و بهینه‌سازی رفتار حافظه پنهان است. با استفاده از این روش می‌توانید مدت زمان اعتبار پاسخ‌ها را بر اساس تغییرپذیری آن‌ها تنظیم کنید. همچنین، می‌توانید داده‌های حساس را به گونه‌ای مدیریت کنید که کاربرانی با دسترسی‌های متفاوت تنها به داده‌های مربوط به خود دسترسی داشته باشند.
مزیت دیگر این روش انعطاف‌پذیری بالایی است که به شما اجازه می‌دهد تا بر اساس نیازهای پروژه خود، بهینه‌ترین راهکار ممکن را پیاده‌سازی کنید. برای مثال، می‌توانید برای صفحات پر بازدید وب‌سایت خود، سیاست‌های کَش متفاوتی نسبت به صفحاتی که کمتر بازدید می‌شوند، در نظر بگیرید.
مثال کد
const nextConfig = {
async headers() {
return [
{
source: '/api/:path*',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=3600',
},
],
},
];
},
};
module.exports = nextConfig;توضیح خط به خط کد
const nextConfig: در این خط، یک متغیر به نام nextConfig تعریف می‌شود که شامل تنظیمات پیکربندی است.async headers(): این تابع به صورت ناهمزمان اجرا می‌شود و به طور خاص برای تعریف هدرهای HTTP استفاده می‌شود.return: با این دستور مقدار هدرهایی که باید برگردانده شوند، تنظیم می‌شود.source: '/api/:path*': الگوی URL که این تنظیمات برای آن اعمال خواهد شد. در اینجا هدف تمامی مسیرهایی است که با /api/ شروع می‌شوند.headers: []: یک آرایه که هدرهای HTTP برای درخواست‌های ورودی را مشخص می‌کند.key: 'Cache-Control': نام هدر HTTP که در حال تنظیم آن هستیم، در اینجا Cache-Control است.value: 'public, max-age=3600': مقدار هدر Cache-Control که نشان‌دهنده مدت زمان اعتبار حافظه پنهان به ثانیه است.