Caching এবং Incremental Static Regeneration (ISR) গাইড ও নোট

Next.js এর একটি শক্তিশালী বৈশিষ্ট্য হল Incremental Static Regeneration (ISR), যা আপনাকে স্ট্যাটিক পেজগুলিকে প্যাকেজ করার মাধ্যমে দ্রুত লোড করার সুবিধা দেয়, তবে সময়ের সাথে সাথে সেই পেজগুলিকে আবার রেন্ডারও করতে পারে। এটি এমনভাবে কাজ করে যে, শুধুমাত্র সেই পেজগুলো পুনরায় তৈরি হয় যেগুলোতে পরিবর্তন ঘটেছে, যার ফলে পারফরম্যান্স উন্নত হয় এবং সার্ভারের লোড কমে।

Caching এবং ISR একসাথে ব্যবহার করলে আপনি স্ট্যাটিক পেজ রেন্ডারিংয়ের সুবিধা পাবেন, তবে সেই পেজগুলোর কন্টেন্ট যখন পরিবর্তিত হয় তখন তা দ্রুত আপডেট হতে পারে। এই টিউটোরিয়ালে আমরা ISR এবং Caching ব্যবহারের পদ্ধতি আলোচনা করব।

১. Incremental Static Regeneration (ISR) কী?

Incremental Static Regeneration (ISR) হল Next.js এর একটি ফিচার, যা আপনাকে স্ট্যাটিক পেজগুলিকে স্ট্যাটিক সাইট জেনারেশন (SSG) এর মাধ্যমে তৈরি করার সুযোগ দেয় এবং একাধিক সময় পর পর সেই পেজগুলোকে পুনরায় রেন্ডার করার অনুমতি দেয়। এর মাধ্যমে আপনি নির্দিষ্ট সময় পর পর স্ট্যাটিক পেজগুলোকে আপডেট করতে পারবেন, যা SEO ও ইউজার এক্সপিরিয়েন্সের জন্য অত্যন্ত উপকারী।

ISR কাজের ধাপ:

1. প্রথমে একটি পেজ getStaticProps ব্যবহার করে তৈরি করা হয় এবং এটি static পেজ হিসেবে সার্ভ করা হয়।
2. পেজটি সার্ভ করার পর, আপনি একটি revalidation time সেট করতে পারেন, যেখানে নির্দিষ্ট সময় পর পর এই পেজটি আবার সার্ভারে রেন্ডার হবে এবং static ফাইলটি পুনরায় আপডেট হবে।
3. এই রেন্ডারিং প্রক্রিয়া বিল্ড টাইমে নয়, বরং রানটাইমে হবে, যার ফলে সার্ভারের লোড কমবে এবং সাইটের পারফরম্যান্স বাড়বে।

২. ISR ব্যবহার করে স্ট্যাটিক পেজ রেন্ডার করা

Next.js এ ISR ব্যবহার করতে হলে, আপনাকে getStaticProps ফাংশনে revalidate প্রপার্টি ব্যবহার করতে হবে। এটি আপনাকে একটি সময় নির্ধারণ করার সুযোগ দেয়, যা পেজটি পুনরায় রেন্ডার হবে।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ পেজ তৈরি করছেন, যেখানে প্রতিটি পোস্ট ১০ সেকেন্ড পর পর আপডেট হবে।

// pages/posts/[id].js

export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const post = await res.json()

  return {
    props: {
      post,
    },
    revalidate: 10,  // ১০ সেকেন্ড পর পর পেজটি পুনরায় রেন্ডার হবে
  }
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: true,
  }
}

export default function Post({ post }) {
  if (!post) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}

ব্যাখ্যা:

• revalidate: 10: এর মানে হল যে, প্রতিটি পেজ ১০ সেকেন্ড পর পর পুনরায় রেন্ডার হবে। এই সময়টুকু পরে নতুন ডেটা ফেচ হবে এবং পেজটি আপডেট হবে।
• getStaticPaths: এই ফাংশনটি ডাইনামিক রাউটের জন্য পাথ তৈরি করে। আপনি কোন পাথগুলো স্ট্যাটিকভাবে জেনারেট করবেন তা এখান থেকে নির্ধারণ করতে পারবেন।
• fallback: true: এটি নিশ্চিত করে যে, যদি কোন পাতা আগে থেকেই তৈরি না থাকে, তবে পেজটি লোড হতে পারে এবং সার্ভারে রেন্ডার হওয়ার পর তা আবার ক্যাশে হয়ে যাবে।

৩. Caching কিভাবে কাজ করে Next.js এ?

Next.js এ caching মূলত আপনার অ্যাপের পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়। সঠিক caching ব্যবহার করলে আপনার অ্যাপের পেজগুলি দ্রুত লোড হয়, এবং সার্ভার লোড কমে যায়। Next.js এ আপনি দুটি ধরনের ক্যাশিং ব্যবহার করতে পারেন:

১. Static Caching (SSG এবং ISR)

যখন আপনি getStaticProps বা ISR ব্যবহার করেন, তখন আপনার পেজের HTML ফাইলগুলি static হিসেবে ক্যাশে রাখা হয়। এই পেজগুলি সার্ভার থেকে সরাসরি দ্রুত লোড হয়, এবং যেহেতু এটি স্ট্যাটিক HTML, এটি সার্চ ইঞ্জিনের জন্য উপকারী।

২. API Caching

আপনি যদি কোনো API এর মাধ্যমে ডেটা ফেচ করেন, তবে সেই API রেসপন্সও ক্যাশে করা যেতে পারে। API রেসপন্স ক্যাশে রাখলে বারবার একই ডেটার জন্য সার্ভার থেকে রিকোয়েস্ট করতে হয় না, ফলে সার্ভারের লোড কমে যায় এবং অ্যাপ দ্রুত কাজ করে।

API ক্যাশিং উদাহরণ:

// pages/api/posts.js

export async function handler(req, res) {
  const cache = await redisClient.get('posts')
  if (cache) {
    return res.json(JSON.parse(cache))
  }

  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await response.json()

  redisClient.setex('posts', 3600, JSON.stringify(posts)) // ১ ঘণ্টা ক্যাশে রাখা হবে
  res.json(posts)
}

ব্যাখ্যা:

• এখানে, Redis ব্যবহার করে API রেসপন্স ক্যাশে রাখা হয়েছে, যাতে প্রতিবার একই রিকোয়েস্ট না করে একই ডেটা ফেচ করা যায়। এই ক্যাশিং প্রক্রিয়া সার্ভারের লোড কমিয়ে দেয় এবং API ডেটার দ্রুত অ্যাক্সেস নিশ্চিত করে।

৪. Caching এবং ISR এর সুবিধাসমূহ

• পারফরম্যান্স বৃদ্ধি: ISR এবং ক্যাশিং পদ্ধতি অ্যাপের দ্রুত লোডিং নিশ্চিত করে, যেহেতু পেজগুলো আগেই রেন্ডার হয়ে থাকে এবং সার্ভার থেকে নতুন ডেটা কম রিকোয়েস্ট হয়।
• কম সার্ভার লোড: ক্যাশিং ব্যবহারের ফলে প্রতিবার ডেটা ফেচের জন্য সার্ভারে রিকোয়েস্ট করতে হয় না, ফলে সার্ভারের লোড কমে যায়।
• SEO: ISR পদ্ধতিতে পেজগুলি স্ট্যাটিকভাবে রেন্ডার হওয়ার ফলে সেগুলোর SEO আরও উন্নত হয়, কারণ সার্চ ইঞ্জিনরা সহজেই এই পেজগুলো ক্রল করতে পারে।

সারাংশ:

Next.js এ Caching এবং Incremental Static Regeneration (ISR) আপনাকে স্ট্যাটিক পেজ তৈরি এবং দ্রুত ডেটা আপডেট করার সুযোগ দেয়। এটি আপনার অ্যাপের পারফরম্যান্স উন্নত করে এবং সার্ভারের লোড কমায়। ISR দিয়ে আপনি নির্দিষ্ট সময়ে স্ট্যাটিক পেজ পুনরায় রেন্ডার করতে পারেন, এবং caching এর মাধ্যমে বারবার একই ডেটার জন্য সার্ভারকে রিকোয়েস্ট না করে দ্রুত রেসপন্স পেতে পারেন।