Static Generation এবং SSR এর মধ্যে পার্থক্য এবং ব্যবহার

Next.js দুটি প্রধান রেন্ডারিং পদ্ধতি প্রদান করে: Static Generation (SSG) এবং Server-Side Rendering (SSR)। প্রতিটি পদ্ধতির নিজস্ব সুবিধা এবং ব্যবহারের ক্ষেত্রে রয়েছে পার্থক্য। এই দুইটি রেন্ডারিং পদ্ধতির সাহায্যে আপনি আপনার অ্যাপ্লিকেশনকে আরও দ্রুত এবং কার্যকরভাবে ব্যবহারকারীকে উপস্থাপন করতে পারেন।

এখানে Static Generation (SSG) এবং Server-Side Rendering (SSR) এর মধ্যে পার্থক্য এবং তাদের ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হয়েছে।

১. Static Generation (SSG)

Static Generation (SSG) হল একটি রেন্ডারিং পদ্ধতি যেখানে পেজটি কম্পাইল এবং বিল্ডের সময়েই HTML ফাইল তৈরি হয়। অর্থাৎ, সার্ভারে রিকোয়েস্ট আসার আগে সমস্ত পেজ একবারের জন্য রেন্ডার করা হয় এবং সেগুলি স্ট্যাটিক HTML ফাইল হিসেবে সেভ করা হয়। তারপর ব্যবহারকারী যখন সেই পেজে আসে, তখন সার্ভার থেকে তাত্ক্ষণিকভাবে এই স্ট্যাটিক HTML পেজ সরবরাহ করা হয়।

সুবিধা:

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

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

Next.js-এ Static Generation এর জন্য getStaticProps এবং getStaticPaths ফাংশন ব্যবহার করা হয়।

getStaticProps: এই ফাংশনটি পেজের ডেটা বিল্ড টাইমে ফেচ করে এবং HTML তৈরির সময় সেই ডেটা পেজে ইনজেক্ট করে।

// pages/index.js

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

  return {
    props: {
      data,
    },
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>Home Page</h1>
      <p>{data}</p>
    </div>
  );
}

export default HomePage;

getStaticPaths: এই ফাংশনটি ডাইনামিক পেজের জন্য প্রয়োজন, যেখানে আগে থেকেই জানানো হয় কোন রাউটগুলো স্ট্যাটিকভাবে প্রক্রিয়া করা হবে।

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

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

  return {
    props: {
      post,
    },
  };
}

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

export default Post;

২. Server-Side Rendering (SSR)

Server-Side Rendering (SSR) হল একটি রেন্ডারিং পদ্ধতি যেখানে HTML প্রতিটি রিকোয়েস্টের সাথে সার্ভার সাইডে রেন্ডার করা হয়। অর্থাৎ, ব্যবহারকারী যখন একটি পেজে রিকোয়েস্ট পাঠায়, তখন সার্ভার সেই পেজের HTML তৈরি করে এবং ক্লায়েন্টে পাঠিয়ে দেয়। এই পদ্ধতিতে ডেটা ফেচিং এবং রেন্ডারিং রিকোয়েস্টের সময়েই হয়।

সুবিধা:

• ডায়নামিক কন্টেন্ট: ব্যবহারকারী বা ডেটা পরিবর্তনের সাথে সাথে পেজ কনটেন্টও রেন্ডার হয়, তাই পেজের কনটেন্ট সবসময় আপ-টু-ডেট থাকে।
• SEO-বান্ধব: সার্ভার সাইডে রেন্ডার হওয়া HTML ইঞ্জিনগুলি সহজে ইনডেক্স করতে পারে, ফলে SEO (Search Engine Optimization) উন্নত হয়।

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

Next.js-এ SSR এর জন্য getServerSideProps ফাংশন ব্যবহার করা হয়, যা প্রতি রিকোয়েস্টের সময় পেজের ডেটা ফেচ করে এবং রেন্ডারিংয়ের জন্য তা সরবরাহ করে।

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

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

export default Post;

৩. Static Generation এবং SSR এর মধ্যে পার্থক্য

৪. কোন পরিস্থিতিতে কোনটি ব্যবহার করবেন?

• Static Generation (SSG) ব্যবহার করুন যদি:
  • আপনার অ্যাপ্লিকেশন বেশিরভাগ স্ট্যাটিক কনটেন্ট নিয়ে তৈরি হয়।
  • পেজের ডেটা খুব একটা পরিবর্তিত হয় না।
  • আপনি দ্রুত লোডিং এবং SEO উন্নত করতে চান।
• Server-Side Rendering (SSR) ব্যবহার করুন যদি:
  • ডেটা ডায়নামিক এবং প্রায়ই পরিবর্তিত হয় (যেমন ইউজারের ডেটা, ইভেন্ট, বা অন্যান্য রিয়েল-টাইম ডেটা)।
  • পেজ কনটেন্ট রিকোয়েস্টের সময় আপডেট করা প্রয়োজন।

সারাংশ

Next.js আপনাকে Static Generation (SSG) এবং Server-Side Rendering (SSR) উভয় রেন্ডারিং পদ্ধতি ব্যবহার করার সুবিধা দেয়। Static Generation দ্রুত এবং পারফরম্যান্সের জন্য উত্তম, যখন SSR ডায়নামিক কন্টেন্টের জন্য আদর্শ। আপনি আপনার প্রজেক্টের প্রয়োজন অনুযায়ী এই দুটি পদ্ধতির মধ্যে থেকে সেরা একটি নির্বাচন করতে পারেন।