Web Development getStaticProps, getServerSideProps এবং getStaticPaths এর ব্যবহার গাইড ও নোট

Next.js এ ডেটা ফেচিং করার জন্য কয়েকটি গুরুত্বপূর্ণ ফাংশন রয়েছে, যার মাধ্যমে আপনি পেজ রেন্ডার করার আগে ডেটা প্রিপেয়ার করতে পারেন। এই ফাংশনগুলো হল:

• getStaticProps
• getServerSideProps
• getStaticPaths

এগুলো React কম্পোনেন্টের বাইরের ফাংশন হিসেবে কাজ করে এবং পেজ রেন্ডার করার সময় ডেটা বা কনটেন্ট লোড করতে সাহায্য করে।

১. getStaticProps

getStaticProps ফাংশনটি Static Generation এর জন্য ব্যবহৃত হয়, যেখানে ডেটা কম্পাইল করার সময় একবার ফেচ করা হয় এবং তারপর সেই ডেটা এক্সপোর্ট করা হয়। এটি এমন পেজের জন্য ব্যবহার করা হয় যেগুলো স্থির বা সময়মত আপডেট হয় না। পেজটি তৈরি করার সময় (Build Time) একবার ডেটা ফেচ করা হয়, এবং তারপর সেই ডেটা ব্যবহারকারীকে প্রদান করা হয়।

ব্যবহারের উদাহরণ:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts
    },
  };
}

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

কাজের প্রক্রিয়া:

• getStaticProps একটি asynchronous function যা সার্ভার সাইডে ডেটা ফেচ করে।
• ডেটা প্রাপ্তি হলে, এটি props হিসেবে পেজ কম্পোনেন্টে পাঠানো হয়।
• পেজটি কেবল একবার build হওয়ার সময়ই ডেটা ফেচ হবে এবং সেগুলো সারা বিশ্বে সবার কাছে একইভাবে থাকবে।
• এর ফলে, Static Site Generation (SSG) প্রক্রিয়া ঘটে।

২. getServerSideProps

getServerSideProps ফাংশনটি Server-Side Rendering (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.body}</p>
    </div>
  );
}

কাজের প্রক্রিয়া:

• getServerSideProps হল একটি asynchronous function যা প্রতিটি রিকোয়েস্টের জন্য রান হয়।
• প্রতিবার ব্যবহারকারী পেজটি ভিজিট করলে, এটি সার্ভার থেকে নতুন ডেটা ফেচ করে এবং পেজের কম্পোনেন্টে পাঠায়।
• এতে করে ডেটা runtime-এ, ব্যবহারকারীর রিকোয়েস্টের সময় ফেচ হয়।

এটি সাধারণত তখন ব্যবহৃত হয় যখন ডেটা পরিবর্তিত হতে থাকে এবং সব ব্যবহারকারীর জন্য সেগুলো এক্সপোজ করা উচিত নয়।

৩. getStaticPaths

getStaticPaths ফাংশনটি Static Generation এর জন্য ব্যবহৃত হয়, কিন্তু এটি dynamic routes (যেমন [id].js) এর জন্য। আপনি যখন একটি ডাইনামিক রাউট তৈরি করেন, তখন Next.js জানে না কোন পেজগুলো স্ট্যাটিকভাবে জেনারেট করতে হবে। এখানে getStaticPaths ফাংশনটি কাজ করে এবং সেটি বলে দেয় কোন রাউটগুলোকে Static Generation এর জন্য প্রস্তুত করা উচিত।

ব্যবহারের উদাহরণ:

// pages/posts/[id].js
export async function getStaticPaths() {
  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,  // fallback false means no other paths will be generated.
  };
}

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.body}</p>
    </div>
  );
}

কাজের প্রক্রিয়া:

• getStaticPaths ফাংশনটি ডাইনামিক রাউটের জন্য সম্ভাব্য সব পাথগুলির একটি তালিকা তৈরি করে।
• এই পাথগুলো getStaticProps ফাংশনের মাধ্যমে স্ট্যাটিক পেজ তৈরি করতে ব্যবহৃত হয়।
• fallback: false মানে হল যে শুধুমাত্র যে পাথগুলো getStaticPaths এ উল্লেখ করা হয়েছে, সেগুলোই স্ট্যাটিকভাবে তৈরি হবে, অন্য পাথগুলোর জন্য 404 পেজ দেখানো হবে।

এটি ডাইনামিক পেজগুলোকে স্ট্যাটিক জেনারেট করার জন্য ব্যবহৃত হয় যখন আপনি জানেন যে কিছু নির্দিষ্ট রাউটগুলো ডেটা দিয়ে পূর্ণ করতে হবে।

Summary

• getStaticProps: Static Generation (SSG) এর জন্য ব্যবহৃত হয়, যেখানে ডেটা build time এ ফেচ করা হয়।
• getServerSideProps: Server-Side Rendering (SSR) এর জন্য ব্যবহৃত হয়, যেখানে ডেটা request time এ ফেচ করা হয়।
• getStaticPaths: Dynamic Routes এর জন্য ব্যবহৃত হয়, যেখানে আপনি ডাইনামিক পেজের জন্য স্ট্যাটিক পাথ গুলো প্রস্তুত করতে পারেন।

এই তিনটি ফাংশন ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ডেটা ফেচিং কৌশল নির্বাচন করতে পারেন, যেমন Static Generation বা Server-Side Rendering, যা আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করা যেতে পারে।