Composable Caching with Next.js

Next.js-এ ডেটা ফেচ করলেন, কিন্তু প্রতি বার একই API কল করলেই আবার ফেচ হচ্ছে! অকারণে CPU-র গ্যাস খরচ!
এখন যদি এই ডেটাটা একবার নিয়ে কেচে রাখতেন, আর বারবার রিইউজ করতেন, তাহলে কত মজা হতো!
এই কাজটাই সহজে করে দেবে 'use cache' ডিরেক্টিভ।

'use cache' আসলে কী ?

সিম্পল ভাষায় 'use cache' হলো Next.js-এর জন্য একটা ম্যাজিক্যাল কমান্ড (JavaScript string literal), যেটা আপনার কোড কম্পাইল হওয়ার সময় Next.js-কে বলে দেয়:

“এই ফাংশনের আউটপুট কেচে রাখো, যেন পরের বার একই ইনপুট পেলে নতুন করে রান করতে না হয়।”

এটা React-এর 'use client' বা 'use server' এর মতোই একটা কম্পাইলার নির্দেশনা। পার্থক্য হলো, এটা ডেটা বা কম্পোনেন্ট লেভেলে কেচিং কন্ট্রোল করে।

কিভাবে কাজ করে?

একটা সিম্পল উদাহরণ ধরুন:

async function getUser(id) {
  'use cache';
  let res = await fetch(`https://api.vercel.app/user/${id}`);
  return res.json();
}

এখানে 'use cache' বলার কারণে Next.js:

1. এই ফাংশনটাকে সার্ভার ফাংশনে কনভার্ট করবে।
2. id-কে কেচ কী-এর অংশ বানাবে।
3. একই id দিয়ে বারবার কল করলে, আগে সেভ করা রেজাল্টই ফেরত দেবে।

মানে, getUser(1) বারবার কল করলে বারবার API হিট করবে না।
শুধু নতুন id আসলেই নতুন কেচ এন্ট্রি তৈরি হবে।

ক্লোজারের ম্যাজিক – ডিপেন্ডেন্সি অটো-ডিটেকশন

ধরুন, আপনি একটা সার্ভার কম্পোনেন্টের ভিতরে কেচিং করছেন:

function Profile({ id }) {
  async function getNotifications(index, limit) {
    'use cache';
    return await db
      .select()
      .from(notifications)
      .limit(limit)
      .offset(index)
      .where(eq(notifications.userId, id));
  }

  return <User notifications={getNotifications} />;
}

এখানে শুধু index আর limit না, id-ও কেচ কী-এর অংশ হওয়া দরকার।
কিন্তু আপনি আলাদা করে লিখেননি! তবুও Next.js অটো-ম্যাজিক দিয়ে বুঝে নিল id ডিপেন্ডেন্সি, আর কেচ কীতে ঢুকিয়ে দিল।

এইজন্য 'use cache' নিরাপদ – ম্যানুয়ালি ভুল করার চান্স কমে যায়।

শুধু cache() ফাংশন কেন নয়?

যদি cache() ফাংশন দিয়ে করতেন, তাহলে ডিপেন্ডেন্সি আপনাকে ম্যানুয়ালি দিতে হতো। ভুলে গেলে কেচ কলিশন, স্টেল ডেটা সব ঝামেলা হাজির।

'use cache' স্ট্যাটিকালি ক্লোজারের ভেতরের সব ভ্যারিয়েবল ট্র্যাক করতে পারে, আর কেচ কী সঠিক রাখে। Runtime-এ cache() দিয়ে করা কঠিন, ভুল করার চান্স বেশি।

Serializable vs Non-Serializable ইনপুট

Next.js কেচ কী বানানোর জন্য ইনপুট সিরিয়ালাইজ করে।

• Serializable: JSON বা React-এর সিরিয়ালাইজেশনে কনভার্ট করা যায় (Promise, সার্কুলার ডেটা, অবজেক্ট ইত্যাদি)।
• Non-Serializable: যেমন JSX। এগুলো সরাসরি কীতে ঢোকে না, বরং “reference” হয়ে রানটাইমে রিজলভ হয়।

এর মানে, আপনি <Profile> কম্পোনেন্ট কেচ করতে পারেন কিন্তু তার ভিতরের children কেচ হবে না।
ফলাফল? ডেটা কেচড থাকবে, কিন্তু ডাইনামিক UI আলাদা ভাবে রেন্ডার হবে – একে বলে Composable Caching।

Donut Pattern

ভাবুন, ডোনাটের বাইরের অংশ হচ্ছে সার্ভার কম্পোনেন্ট (কেচড ডেটা), আর ভিতরের ফাঁকা অংশ হচ্ছে ক্লায়েন্ট কম্পোনেন্ট (ইন্টার‌্যাক্টিভ UI)।
'use cache' ঠিক এইভাবেই কেচড আউটপুট রেখে, ভিতরের ডাইনামিক অংশ আলাদা হ্যান্ডল করে।

Tagging & Invalidation

আপনি চাইলে কেচের লাইফসাইকেল কন্ট্রোল করতে পারেন:

async function getUser(id) {
  'use cache';
  cacheLife('hours');
  let res = await fetch(`https://api.vercel.app/user/${id}`);
  return res.json();
}

এছাড়া cacheTag দিয়ে কেচ এন্ট্রি মার্ক করতে পারেন, পরে revalidateTag() দিয়ে সেই কেচ ইনভ্যালিডেট করা যাবে।

কেন 'use cache' আলাদা?

• Simple: ডিপেন্ডেন্সি ম্যানুয়ালি চিন্তা করার দরকার নেই।
• Powerful: জটিল রানটাইম ভ্যালু দিয়েও নিরাপদে কেচ করা যায়।
• Composable: ডেটা আর UI আলাদা ভাবে কেচ হয়।

'use cache' এখনো Next.js-এ এক্সপেরিমেন্টাল। কিন্তু ভবিষ্যতে এটা কেচিং লজিককে অনেক সহজ আর শক্তিশালী করে তুলবে।
টেস্ট করে দেখুন, আর Next.js টিমকে ফিডব্যাক দিন।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন