Next.js আপনাকে ডিফল্টভাবে কী কী দেয়

  • Data cache – Next.js 13+ এ প্রতিটি fetch() কল একটি per-request memory cache-এ জমা হয়। একটি revalidate অপশন যোগ করলে এটি রানটাইমকে একটি নির্দিষ্ট সময় অন্তর ডেটা রিফ্রেশ করতে বলে, যা একটি hot API call-কে শুধুমাত্র প্রয়োজন হলেই একটি cold one-এ পরিণত করে।
  • Full-route cache – ফ্রেমওয়ার্কটি রেন্ডার করা HTML এবং একটি সম্পূর্ণ রুটের জন্য প্রয়োজনীয় ডেটা সংরক্ষণ করে। পুনরায় আসা ভিজিটররা তাৎক্ষণিক ট্রানজিশন দেখতে পান কারণ সার্ভার পুনরায় রেন্ডারিং এড়িয়ে যায়।
  • ISR – পুরনো ভার্সনটি ট্রাফিক হ্যান্ডেল করতে থাকাকালীন ব্যাকগ্রাউন্ডে স্ট্যাটিক পেজগুলো পুনরায় জেনারেট হয়। এটি আপনাকে প্রতিবার কন্টেন্ট পরিবর্তনের সময় ফুল রিবিল্ড ছাড়াই একটি বড় সাইট স্ট্যাটিক রাখতে সাহায্য করে।
  • Server Component cache() – React-এর cache হেল্পারটি একটি সিঙ্গেল রিকোয়েস্টের মেয়াদে ব্যয়বহুল ক্যালকুলেশন বা ডেটাবেস কানেকশনগুলোকে মেমোইজ (memoize) করে রাখে, যা একটি পেজের কম্পোনেন্ট ট্রির ভেতরে একই কাজ বারবার হওয়া রোধ করে।

এই ক্যাশগুলো “first-hit” সমস্যা সমাধান করলেও এগুলো এখনও Node প্রসেসের ভেতরেই থাকে। সার্ভার এবং ডেটাবেসকে সুরক্ষিত রাখতে ক্যাশিং প্রক্রিয়াকে আরও বাইরের স্তরে নিয়ে যান।

আপনি যে এক্সটার্নাল লেয়ারগুলো যোগ করতে পারেন

লেয়ার কী সংরক্ষণ করে সাধারণ টুল কীভাবে সাহায্য করে
CDN স্ট্যাটিক অ্যাসেট, HTML, API JSON Cloudflare, Akamai, AWS CloudFront কন্টেন্টকে এজ লোকেশনে নিয়ে যায়, যা ইউজারের কাছে ডেটা পৌঁছানোর সময় (round-trip) কমিয়ে দেয়
Reverse proxy Node-এ পৌঁছানোর আগেই পুরো পেজের রেসপন্স Nginx, Varnish সরাসরি ক্যাশ করা পেজগুলো সার্ভ করে, যা Next.js ইন্সট্যান্সের ওপর লোড কমায়
Application-level cache ব্যয়বহুল DB কুয়েরি বা API কলের ফলাফল Redis, Memcached একটি দ্রুতগতির key-value স্টোর প্রদান করে যা সার্ভার রিস্টার্ট হলেও মুছে যায় না এবং একাধিক অ্যাপ ইন্সট্যান্সের মধ্যে শেয়ার করা যায়

প্রতিটি লেয়ার অরিজিন ডেটাবেস থেকে আরও দূরে অবস্থিত, তাই একটি লেভেলে ক্যাশ মিস (miss) হলে তা পরবর্তী লেয়ারে চলে যায়, এবং শেষ পর্যন্ত শুধুমাত্র একান্ত প্রয়োজন হলেই ডেটাবেসে পৌঁছায়।

ক্যাশ ফ্রেশ রাখা

ইনভ্যালিডেশন (Invalidation) বেশিরভাগ টিমের জন্যই একটি চ্যালেঞ্জ। তিনটি কার্যকর প্যাটার্ন খুব ভালো কাজ করে:

  • Time-based (TTL) – একটি ক্যাশ এন্ট্রির জন্য একটি নির্দিষ্ট মেয়াদ (expiration) নির্ধারণ করে দিন। এটি কনফিগার করা সহজ কিন্তু টাইমার শেষ না হওয়া পর্যন্ত এটি পুরনো ডেটা দেখাতে পারে।
  • Event-driven – আপনার CMS বা এমন কোনো ডেটা সোর্সের সাথে যুক্ত করুন যা কন্টেন্ট পরিবর্তনের সময় একটি ওয়েবহুক (webhook) পাঠায়। এই ওয়েবহুকটি সংশ্লিষ্ট ক্যাশ এন্ট্রিটি মুছে ফেলার (purge) কাজ শুরু করে।
  • Tag-based – একগুচ্ছ fetch-এর সাথে একটি লজিক্যাল ট্যাগ যুক্ত করুন (যেমন, product-list)। যখন ওই গ্রুপের কোনো আইটেম পরিবর্তিত হয়, তখন একটি মাত্র revalidateTag('product-list') কল সেই ট্যাগ শেয়ার করা প্রতিটি এন্ট্রি মুছে ফেলে।

এই পদ্ধতিগুলোর মিশ্রণ আপনাকে ডেটার ফ্রেশনেস এবং ক্যাশ-হিট রেটের মধ্যে ভারসাম্য বজায় রাখতে সাহায্য করবে।

বেশিরভাগ টিমের জন্য কার্যকর একটি হায়ারার্কি

  1. Browser cache – স্ট্যাটিক অ্যাসেট (CSS, JS, images) এর জন্য একটি দীর্ঘ max-age সেট করা হয় যাতে ইউজারের ডিভাইস আর কখনোই নেটওয়ার্ক থেকে এটি না চায়।
  2. CDN – এজ নোডগুলো সম্পূর্ণ HTML পেজ এবং API JSON ক্যাশ করে রাখে এবং Next.js-এ আপনার সেট করা Cache-Control হেডার মেনে চলে।
  3. Reverse proxy – একটি Nginx বা Varnish ইন্সট্যান্স Next.js সার্ভারের সামনে থাকে এবং যে রুটগুলো খুব কম পরিবর্তিত হয় সেগুলোর জন্য ক্যাশ করা রেসপন্স সার্ভ করে।
  4. Next.js internal cache – ফ্রেমওয়ার্কের ডেটা এবং রুট ক্যাশগুলো per-request memoization এবং ISR হ্যান্ডেল করে।
  5. Application cache – Redis ভারী ডেটাবেস কুয়েরির ফলাফল সংরক্ষণ করে, যা কুয়েরি প্যারামিটার বা ট্যাগ দ্বারা চিহ্নিত থাকে।
  6. Database – তথ্যের চূড়ান্ত উৎস, যা শুধুমাত্র উপরের প্রতিটি লেভেলে ক্যাশ মিস হলে কুয়েরি করা হয়।

যখন একটি রিকোয়েস্ট আসে, এটি এই তালিকা অনুযায়ী নিচের দিকে যেতে থাকে যতক্ষণ না কোনো লেয়ার সেটির উত্তর দেয়। দ্রুততম উত্তরটিই গ্রহণ করা হয় এবং সেই রেসপন্সটি ভবিষ্যতে ব্যবহারের জন্য চেইনের উপরের দিকে লিখে রাখা হয়।

সবকিছু একসাথে সাজানো

  1. আপনার API রুটে Cache-Control হেডার সেট করুন
  2. আপনার CDN কনফিগার করুন – HTML এবং JSON এন্ডপয়েন্টের জন্য এজ ক্যাশিং (edge caching) চালু করুন এবং নিশ্চিত করুন যে CDN আপনার Cache-Control হেডার মেনে চলছে।
  3. একটি reverse proxy ডেপ্লয় করুন – আপনার Next.js সার্ভারের সামনে Nginx ব্যবহার করুন।
  4. Redis যোগ করুন – ব্যয়বহুল ডেটাবেস কুয়েরির ফলাফল ক্যাশ করুন।
  5. আপনার কম্পোনেন্টে revalidateTag ব্যবহার করুন – একটি নির্দিষ্ট ট্যাগের জন্য Next.js ইন্টারনাল ক্যাশ পরিষ্কার করতে revalidateTag কল করুন।

সারসংক্ষেপ

Next.js-এর ভেতরে থাকা একটি মাত্র ক্যাশ প্রথম রিকোয়েস্টের গতি বাড়াতে পারে, কিন্তু প্রকৃত স্কেলেবিলিটি আসে একটি সুশৃঙ্খল স্ট্যাক থেকে: browser → CDN → reverse proxy → framework → Redis → database। প্রতিটি লেয়ার কনফিগার করুন, সময়, ইভেন্ট এবং ট্যাগের মাধ্যমে ইনভ্যালিডেশন হ্যান্ডেল করুন এবং আপনার মেট্রিক্স পর্যবেক্ষণ করুন। এতে আপনার ব্যাকএন্ড ট্রাফিক স্পাইক সামলাতে পারবে এবং ল্যাটেন্সি (latency) কম থাকবে।