পেজ ভিত্তিক ডেটা ফেচিং এবং পেজ রেন্ডারিং

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

Next.js-এ পেজ ভিত্তিক ডেটা ফেচিং মূলত তিনটি প্রধান কৌশলের মাধ্যমে করা হয়:

1. getStaticProps (SSG - Static Site Generation)
2. getServerSideProps (SSR - Server Side Rendering)
3. getInitialProps (SSR/SSG - পূর্ববর্তী সংস্করণে ব্যবহৃত)

১. getStaticProps (SSG - Static Site Generation)

getStaticProps ফাংশনটি Next.js এর স্ট্যাটিক সাইট জেনারেশন (SSG) কৌশল ব্যবহার করে ডেটা ফেচিং করে। এটি পেজের রেন্ডারিংয়ের সময় আগে ডেটা সংগ্রহ করে এবং তারপর সেই ডেটা ব্যবহার করে পেজটি রেন্ডার করে। এটি বিশেষভাবে দ্রুত এবং স্কেলেবল, কারণ সার্ভারের পরিবর্তে একবার ডেটা সংগ্রহ করে স্ট্যাটিক HTML পেজ তৈরি করা হয়, যা পরবর্তীতে ব্যবহারকারীদের জন্য দ্রুত লোড হয়।

কিভাবে ব্যবহার করবেন:

// 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>
  );
}

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

সুবিধা:

• দ্রুত লোডিং
• স্কেলেবিলিটি

সীমাবদ্ধতা:

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

২. getServerSideProps (SSR - Server Side Rendering)

getServerSideProps ফাংশনটি সার্ভার সাইড রেন্ডারিং (SSR) কৌশল ব্যবহার করে। এটি প্রতিটি রিকোয়েস্টের জন্য ডেটা ফেচ করে এবং সেই ডেটা ব্যবহার করে পেজটি রেন্ডার করে। অর্থাৎ, যখনই ব্যবহারকারী পেজে প্রবেশ করবে, তখন সার্ভার থেকে ডেটা নেওয়া হবে এবং রেন্ডারিং হবে।

কিভাবে ব্যবহার করবেন:

// pages/index.js

export async function getServerSideProps() {
  // 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>
  );
}

getServerSideProps ফাংশনটি প্রতিটি রিকোয়েস্টের জন্য রান হয়, অর্থাৎ যখনই ব্যবহারকারী পেজটি অ্যাক্সেস করবে, সার্ভার থেকে নতুন ডেটা নেওয়া হবে এবং পেজটি রেন্ডার হবে। এটি বিশেষভাবে উপকারী যখন আপনার ডেটা সার্ভার সাইডে সেন্ট্রালাইজড থাকে বা ডেটা প্রায়ই পরিবর্তিত হয়।

সুবিধা:

• সর্বশেষ ডেটা রেন্ডারিং
• সার্ভার সাইডে কাস্টম লগিক প্রয়োগ করা যেতে পারে

সীমাবদ্ধতা:

• প্রতি রিকোয়েস্টে সার্ভার সাইডে ডেটা ফেচ করা হয়, যার ফলে কিছুটা লেটেন্সি থাকতে পারে।
• সার্ভারের উপর বেশি চাপ পড়ে।

৩. getInitialProps (SSR/SSG)

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

উদাহরণ:

// pages/index.js

HomePage.getInitialProps = async () => {
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();
  return { 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>
  );
}

সুবিধা:

• ডেটা ফেচিং ক্লায়েন্ট এবং সার্ভার সাইড উভয়ই করা যায়।

সীমাবদ্ধতা:

• বর্তমানে getStaticProps এবং getServerSideProps এর তুলনায় কম কার্যকরী।

সারাংশ

Next.js আপনাকে বিভিন্ন ডেটা ফেচিং কৌশল দেয় যাতে আপনি আপনার অ্যাপ্লিকেশনকে দ্রুত, স্কেলেবল এবং কার্যকরী করতে পারেন। আপনি getStaticProps ব্যবহার করে স্ট্যাটিক সাইট জেনারেশন (SSG) করতে পারেন, getServerSideProps ব্যবহার করে সার্ভার সাইড রেন্ডারিং (SSR) করতে পারেন, এবং getInitialProps দিয়ে পুরনো পদ্ধতিতে ডেটা ফেচ করতে পারেন।

• getStaticProps: স্ট্যাটিক সাইট জেনারেশন, ডেটা বিল্ড টাইমে ফেচ করা হয়।
• getServerSideProps: সার্ভার সাইড রেন্ডারিং, রিকোয়েস্ট প্রতি ডেটা ফেচ করা হয়।
• getInitialProps: পুরনো পদ্ধতি, সার্ভার সাইড এবং ক্লায়েন্ট সাইড উভয় জায়গায় ডেটা ফেচ করা যায়।

আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুসারে উপযুক্ত পদ্ধতি নির্বাচন করুন।