Static এবং Dynamic ডেটা ব্যবস্থাপনা

Next.js ডেটা ফেচিং এর জন্য স্ট্যাটিক এবং ডাইনামিক উভয় ধরনের পদ্ধতি সাপোর্ট করে। আপনি আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী এই পদ্ধতিগুলোর মধ্যে নির্বাচন করতে পারেন।

১. স্ট্যাটিক ডেটা ব্যবস্থাপনা (Static Data Management)

স্ট্যাটিক ডেটা ব্যবস্থাপনা মানে হল এমন ডেটা যা একবার তৈরি হয়ে গেলে, তা পরিবর্তিত না হয়ে পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করা যায়। Next.js স্ট্যাটিক সাইট জেনারেশন (SSG) ব্যবহার করে এই ধরনের ডেটা ফেচিং এবং রেন্ডারিং করতে সহায়ক।

getStaticProps (SSG)

getStaticProps ফাংশনটি ব্যবহার করে আপনি এমন ডেটা ফেচ করতে পারেন যা বারবার রেন্ডার করার সময় প্রয়োজন হয় না এবং পরিবর্তন হয় না। একবার ডেটা ফেচ হওয়ার পর তা স্ট্যাটিকভাবে পেজে সংরক্ষিত থাকে।

উদাহরণ:

// pages/index.js

export async function getStaticProps() {
  // API থেকে ডেটা ফেচ করা
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();

  return {
    props: { posts: data },  // পেজের প্রপ্স হিসেবে ডেটা পাঠানো
  };
}

export default function HomePage({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

স্ট্যাটিক ডেটা ব্যবস্থাপনার সুবিধা:

• পেজটি খুব দ্রুত লোড হয়, কারণ ডেটা একবার ফেচ হয়ে স্ট্যাটিকভাবে তৈরি হয়।
• সার্ভারের উপর চাপ কম থাকে, কারণ সার্ভার প্রতি রিকোয়েস্টে ডেটা ফেচ করার প্রয়োজন নেই।

সীমাবদ্ধতা:

• যদি ডেটা দ্রুত পরিবর্তিত হয়, তবে নতুন বিল্ডের প্রয়োজন হতে পারে।

২. ডাইনামিক ডেটা ব্যবস্থাপনা (Dynamic Data Management)

ডাইনামিক ডেটা ব্যবস্থাপনা মানে হল এমন ডেটা যা নিয়মিত পরিবর্তিত হয় এবং আপনাকে সর্বশেষ ডেটা দেখানোর জন্য প্রতিটি রিকোয়েস্টে নতুন করে ফেচ করতে হয়। Next.js সার্ভার সাইড রেন্ডারিং (SSR) এর মাধ্যমে এই ধরনের ডেটা ফেচ করতে পারে।

getServerSideProps (SSR)

getServerSideProps ফাংশনটি সার্ভার সাইড রেন্ডারিং (SSR) এর মাধ্যমে ডাইনামিক ডেটা ফেচ করার জন্য ব্যবহৃত হয়। এই ফাংশনটি প্রতিটি রিকোয়েস্টের জন্য ডেটা ফেচ করে এবং পেজটি সার্ভার সাইডে রেন্ডার করে।

উদাহরণ:

// pages/posts/[id].js

export async function getServerSideProps({ params }) {
  // ডাইনামিক ডেটা ফেচ করা
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },  // পেজের প্রপ্স হিসেবে ডেটা পাঠানো
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

এখানে getServerSideProps ডাইনামিক রাউট পেজের জন্য ব্যবহার করা হয়েছে, যেখানে params.id ব্যবহার করে পেজের জন্য ডাইনামিক ডেটা ফেচ করা হচ্ছে। প্রতিটি রিকোয়েস্টে নতুন ডেটা ফেচ করা হবে এবং সেটি পেজে রেন্ডার করা হবে।

ডাইনামিক ডেটা ব্যবস্থাপনার সুবিধা:

• ডেটা সর্বদা আপডেটেড থাকে, কারণ প্রতিটি রিকোয়েস্টে নতুন ডেটা ফেচ করা হয়।
• ব্যবহারকারীরা সর্বশেষ ডেটা দেখতে পান।

সীমাবদ্ধতা:

• সার্ভারে অতিরিক্ত লোড হয়, কারণ প্রতিটি রিকোয়েস্টে ডেটা ফেচ করতে হয়।
• পেজ লোডের সময় একটু বেশি হতে পারে।

৩. ডাইনামিক রাউটিং এবং ডেটা ফেচিং

Next.js ডাইনামিক রাউটিং সমর্থন করে, যার মাধ্যমে আপনি URL প্যারামিটার অনুযায়ী ডেটা ফেচ করতে পারেন। আপনি getStaticPaths এবং getStaticProps একসাথে ব্যবহার করে ডাইনামিক পেজগুলোর জন্য স্ট্যাটিক ডেটা ফেচ করতে পারেন।

উদাহরণ:

// pages/posts/[id].js

export async function getStaticPaths() {
  // API থেকে ডাইনামিক পাথ সংগ্রহ
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // ডাইনামিক পাথ রিটার্ন করা
  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // নির্দিষ্ট পোস্টের ডেটা ফেচ করা
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },  // পেজে প্রপ্স হিসেবে ডেটা পাঠানো
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

এখানে, getStaticPaths ব্যবহার করে ডাইনামিক পাথের তালিকা তৈরি করা হয় এবং getStaticProps ব্যবহার করে নির্দিষ্ট পোস্টের ডেটা ফেচ করা হয়।

সারাংশ

Next.js এ স্ট্যাটিক এবং ডাইনামিক ডেটা ব্যবস্থাপনা দুটি শক্তিশালী কৌশল। আপনি getStaticProps ব্যবহার করে স্থিতিশীল এবং দ্রুত লোডিং ডেটা ম্যানেজ করতে পারেন এবং getServerSideProps ব্যবহার করে সার্ভার সাইডে ডাইনামিক ডেটা ফেচ করতে পারেন। আপনার প্রোজেক্টের চাহিদার উপর ভিত্তি করে আপনি এই দুটি পদ্ধতির মধ্যে নির্বাচন করতে পারবেন, এবং Next.js আপনাকে একটি স্কেলেবল এবং ফ্লেক্সিবল সিস্টেম প্রদান করবে।