Next.js এর Static Generation এবং Server-Side Rendering গাইড ও নোট

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

Static Generation

Static Generation (SSG) হলো এমন একটি পদ্ধতি যেখানে পেজটি তৈরি হয় কনপাইল টাইমে, অর্থাৎ অ্যাপ্লিকেশনটি ডিপ্লয় করার সময়। এটি মূলত সেইসব পেজের জন্য ব্যবহৃত হয়, যেগুলোর ডাটা পরিবর্তিত হয় না বা খুব কম পরিবর্তিত হয়। Static Generation পেজটি কনপাইল করার সময় আগেই তৈরি হয়ে যায় এবং এটি সঠিক সময় ও URL অনুযায়ী সরাসরি ব্রাউজারে রেন্ডার হয়।

Static Generation এর সুবিধা:

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

Static Generation ব্যবহার করার উদাহরণ:

// pages/index.js

export async function getStaticProps() {
  // ডাটা ফেচিং (যেমন, API কল বা ডাটাবেস)
  const data = await fetch('https://api.example.com/data').then(res => res.json());

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

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Static Generation Example</h1>
      <p>{data}</p>
    </div>
  );
}

এখানে, getStaticProps ফাংশনটি Next.js কে জানায় যে এই পেজটি Static Generation এর মাধ্যমে তৈরি হবে। এটি সাইটের বিল্ড টাইমে ডাটা ফেচ করে পেজটি রেন্ডার করবে এবং ফাইনাল HTML তৈরি করবে।

যখন Static Generation ব্যবহার করবেন:

• যেসব পেজের ডাটা বিরলভাবে পরিবর্তিত হয় বা পরিবর্তন হয় না।
• আপনার অ্যাপ্লিকেশনের যেসব পেজে SEO গুরুত্বপূর্ণ, যেমন ব্লগ পোস্ট, প্রোডাক্ট পেজ ইত্যাদি।

Server-Side Rendering (SSR)

Server-Side Rendering (SSR) হলো একটি পদ্ধতি যেখানে পেজটি প্রতি রিকোয়েস্টে সার্ভার থেকে রেন্ডার হয়। এই কৌশলে, প্রতিটি ইউজারের জন্য পেজটি সার্ভার সাইডে রেন্ডার করা হয় এবং তারপর HTML ব্রাউজারে পাঠানো হয়। এটি বিশেষভাবে কার্যকর, যখন পেজের ডাটা প্রতি রিকোয়েস্টে পরিবর্তিত হয়।

Server-Side Rendering এর সুবিধা:

• রিয়েল-টাইম ডাটা: যেহেতু পেজটি প্রতিবার রিকোয়েস্টে রেন্ডার হয়, এতে ডাটা সর্বশেষ স্টেট অনুযায়ী রেন্ডার হয়।
• SEO: যেহেতু সার্ভার সাইডে পেজ রেন্ডার হয়, এটি SEO-র জন্য উপকারী কারণ সার্চ ইঞ্জিন বট সরাসরি HTML কোড দেখতে পায়।
• ডাইনামিক কনটেন্ট: যেখানে ডাটা বা কনটেন্ট প্রতি রিকোয়েস্টে পরিবর্তিত হয়, সেখানে SSR সবচেয়ে ভালো।

Server-Side Rendering ব্যবহার করার উদাহরণ:

// pages/index.js

export async function getServerSideProps() {
  // API কল বা ডাটাবেস থেকে ডাটা ফেচ
  const data = await fetch('https://api.example.com/data').then(res => res.json());

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

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendering Example</h1>
      <p>{data}</p>
    </div>
  );
}

এখানে getServerSideProps ফাংশনটি সিগন্যাল দেয় যে এই পেজটি প্রতিটি রিকোয়েস্টে সার্ভার সাইডে রেন্ডার হবে। সার্ভার পেজটি তৈরি করে এবং ব্রাউজারে পাঠায়।

যখন Server-Side Rendering ব্যবহার করবেন:

• আপনার পেজের ডাটা প্রতিবার রিকোয়েস্টে পরিবর্তিত হয়।
• ইউজার ডাটা নির্ভরশীল পেজ (যেমন ড্যাশবোর্ড, প্রোফাইল পেজ ইত্যাদি) যেখানে প্রতিবার নতুন ডাটা লোড হয়।
• আপনি SEO-র জন্য গুরুত্বপূর্ণ ডাটা সঠিক সময়ে আপডেট করতে চান।

Static Generation এবং Server-Side Rendering এর মধ্যে পার্থক্য

উপসংহার

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

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

এই টেকনিকটি বিশেষ করে ডাইনামিক কনটেন্টের জন্য, SEO ফ্রেন্ডলি এবং দ্রুত লোডিং পেজের জন্য উপকারী। Next.js তে SSG মূলত getStaticProps এবং getStaticPaths ফাংশনের মাধ্যমে বাস্তবায়িত হয়।

Static Generation (SSG) কী?

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

SSG এর প্রক্রিয়া:

1. বিল্ড টাইমে পেজ রেন্ডারিং।
2. তৈরি করা HTML ফাইল স্ট্যাটিক ফাইল হিসেবে সার্ভারে জমা থাকে।
3. ব্যবহারকারী যখন সেই পেজটি অ্যাক্সেস করে, তখন স্ট্যাটিক HTML দ্রুত লোড হয়।

SSG ব্যবহার করে আপনি এমন পেজ তৈরি করতে পারেন যেগুলোর কনটেন্ট পরবর্তীতে পরিবর্তিত হয় না বা খুব কম পরিবর্তিত হয়, যেমন ব্লগ পোষ্ট, প্রোডাক্ট পেজ, ল্যান্ডিং পেজ ইত্যাদি।

SSG এর প্রয়োজনীয়তা

১. দ্রুত লোডিং

Static Generation এর মাধ্যমে তৈরি করা পেজগুলি দ্রুত লোড হয় কারণ এগুলি সার্ভারে প্রি-রেন্ডারড HTML ফাইল হিসেবে থাকে এবং এগুলো সার্ভার থেকে সরাসরি সার্ভ করা হয়। এতে ব্যবহারকারীকে লোডিং টাইম কমে যায় এবং অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত হয়।

২. SEO (Search Engine Optimization) এর জন্য উপকারী

যেহেতু SSG তে পেজগুলো প্রি-রেন্ডার হয়, তাই সার্চ ইঞ্জিন বটগুলির জন্য এটি খুবই উপকারী। সার্চ ইঞ্জিন বট পেজের কনটেন্ট ইন্ডেক্স করতে পারে কারণ এটি স্ট্যাটিক HTML ফাইল হিসেবে সার্ভ করা হয়। এর ফলে SEO র‌্যাঙ্কিং উন্নত হয়।

৩. স্কেলেবিলিটি (Scalability)

Static pages অনেক বেশি স্কেলেবল হয় কারণ সার্ভার প্রতিটি রিকোয়েস্টে পেজটি রেন্ডার না করে সরাসরি HTML ফাইল সার্ভ করে। এর ফলে সার্ভার লোড কমে এবং সিস্টেম বেশি ব্যবহারকারীর জন্য প্রস্তুত থাকে।

৪. নির্ভরযোগ্যতা

Static Generation সার্ভার সাইড রেন্ডারিংয়ের তুলনায় কম ফেইলারের আশঙ্কা সৃষ্টি করে, কারণ সার্ভারে রেন্ডারিংয়ের কোনও প্রয়োজন নেই। প্রতিটি পেজ আগে থেকেই প্রি-রেন্ডার করা থাকে।

Next.js তে Static Generation (SSG) কিভাবে কাজ করে?

Next.js তে SSG সাধারণত getStaticProps এবং getStaticPaths ফাংশনের মাধ্যমে কনফিগার করা হয়।

১. getStaticProps

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

// pages/blog/[id].js

export async function getStaticProps(context) {
  const { id } = context.params;
  
  // API থেকে ডেটা ফেচ করুন
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();
  
  return {
    props: {
      post,
    },
  };
}

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

এখানে, getStaticProps পেজ লোড হওয়ার সময় ডেটা ফেচ করে এবং সেই ডেটা পেজের প্রপস হিসেবে পাঠায়।

২. getStaticPaths

যখন আপনার ডাইনামিক রাউট (যেমন [id]) থাকে, তখন Next.js কে বলে দিতে হয় কেবল কোন পাথগুলি স্ট্যাটিকভাবে রেন্ডার হবে। এটি getStaticPaths এর মাধ্যমে করা হয়। এই ফাংশনটি আপনি ডাইনামিক রাউট পেজের জন্য ব্যবহার করেন এবং এটি অ্যাসিঙ্ক্রোনাসভাবে স্ট্যাটিক রেন্ডার করার জন্য প্রয়োজনীয় পাথের একটি তালিকা রিটার্ন করে।

// pages/blog/[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,  // fallback: false এর মানে হল যে শুধু নির্দিষ্ট paths গুলোই স্ট্যাটিকভাবে রেন্ডার হবে
  };
}

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

Static Generation (SSG) এর সুবিধা:

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

Static Generation এবং অন্যান্য রেন্ডারিং পদ্ধতি তুলনা:

সারাংশ

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

Next.js একটি React ফ্রেমওয়ার্ক, যা Server-Side Rendering (SSR) সমর্থন করে। SSR হল এমন একটি কৌশল, যেখানে অ্যাপ্লিকেশনের HTML পেজটি সার্ভারে রেন্ডার করা হয় এবং সেই HTML ক্লায়েন্টে পাঠানো হয়। এতে পেজের প্রথম লোড দ্রুত হয় এবং সার্চ ইঞ্জিনের জন্য এটি আরও উপযুক্ত হয়, কারণ সার্ভারেই পূর্ণ HTML রেন্ডার হয়ে পাঠানো হয়।

Server-Side Rendering (SSR) কী?

Server-Side Rendering (SSR) হল একটি রেন্ডারিং প্রক্রিয়া, যেখানে React কম্পোনেন্টগুলি সার্ভারের পক্ষ থেকে রেন্ডার করা হয় এবং সম্পূর্ণ HTML ক্লায়েন্টকে পাঠানো হয়। এর মানে হল যে, ব্যবহারকারী যখন পেজটি প্রথমবার লোড করেন, তখন সার্ভার সম্পূর্ণ পেজ তৈরি করে এবং সেটি ব্রাউজারে পাঠায়। এই পদ্ধতির ফলে, React অ্যাপ্লিকেশনের প্রথম পেজটি দ্রুত লোড হয় এবং এটি সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) এর জন্য আরও কার্যকরী হয়ে ওঠে।

SSR এর মধ্যে কি ঘটে:

1. Request: ব্যবহারকারী একটি URL অনুরোধ করেন (যেমন, http://localhost:3000/ বা http://localhost:3000/products ইত্যাদি)।
2. Rendering on the server: Next.js সেই রিকোয়েস্টের জন্য সার্ভারে React কম্পোনেন্ট রেন্ডার করে।
3. HTML Response: সার্ভার রেন্ডার করা HTML ব্যবহারকারীর ব্রাউজারে পাঠিয়ে দেয়।
4. Hydration: ব্রাউজার সাইডে React পুনরায় অ্যাপটি "হাইড্রেট" করে, অর্থাৎ, React কম্পোনেন্টগুলো পুনরায় লাইভ এবং ইন্টারঅ্যাকটিভ হয়ে ওঠে।

SSR এর সুবিধাসমূহ

১. দ্রুত প্রথম লোড

SSR ব্যবহার করে, ব্যবহারকারী যখন প্রথমবার অ্যাপ্লিকেশনটি লোড করেন, তখন তারা একটি পূর্ণ HTML পেজ পায়, যা দ্রুত প্রদর্শিত হয়। এটি ব্যবহারকারীর প্রথম অভিজ্ঞতা দ্রুত করে, বিশেষ করে যদি অ্যাপটি ভারী হয় বা অনেক সময় নেয় লোড হতে।

২. SEO এর জন্য উপযুক্ত

SSR হল সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) এর জন্য একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। যখন সার্ভার পেজ রেন্ডার করে, তখন সার্চ ইঞ্জিন বটগুলোর জন্য সম্পূর্ণ HTML পাঠানো হয়, যা বটগুলো সহজেই ক্রল করতে পারে এবং সাইটের কনটেন্ট ইনডেক্স করতে পারে। এই কারণে, SSR-এর মাধ্যমে পেজগুলি সার্চ ইঞ্জিনের র‍্যাঙ্কিংয়ে উন্নতি করতে পারে।

৩. শেয়ার করা URL-এর জন্য উপযোগিতা

যখন আপনার অ্যাপ একটি SSR পদ্ধতি ব্যবহার করে রেন্ডার হয়, তখন আপনি পেজের ইউআরএল শেয়ার করলে, ব্যবহারকারী বা সার্চ ইঞ্জিন যে কোনো সময় সঠিক কনটেন্ট দেখতে পাবেন, কারণ প্রথম থেকেই পেজটি সঠিক HTML সহ রেন্ডার হয়ে আসবে। এটি সোশ্যাল মিডিয়া শেয়ারিং বা সঠিক লিংক শেয়ার করতে উপকারী।

৪. অধিক কাস্টমাইজেশন

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

কেন SSR প্রয়োজন?

SSR এর প্রয়োজনীয়তা সাধারণত কিছু নির্দিষ্ট পরিস্থিতিতে দেখা দেয়, যেমন:

১. SEO-এর গুরুত্ব

যখন আপনি একটি পাবলিক-facing ওয়েব অ্যাপ তৈরি করছেন, বিশেষ করে যেখানে কনটেন্টের বড় অংশ সার্চ ইঞ্জিনের মাধ্যমে পাওয়া যায়, সেখানে SEO একটি গুরুত্বপূর্ণ ফ্যাক্টর। সার্চ ইঞ্জিন বটগুলো JavaScript কোড রান করে না, তাই শুধুমাত্র ক্লায়েন্ট সাইড রেন্ডারিং হলে সেগুলো HTML ইনডেক্স করতে পারবে না। তবে SSR-এ সার্ভার থেকে রেন্ডার হওয়া HTML পেজ সহজেই ইনডেক্স করা যায়, যা SEO-তে সহায়ক।

২. ডাইনামিক কনটেন্টের প্রয়োজন

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

৩. প্রথম লোডের পারফরম্যান্স

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

Next.js-এ SSR কীভাবে ব্যবহার করবেন?

Next.js-এ Server-Side Rendering (SSR) সহজে ব্যবহার করা যায় getServerSideProps ফাংশন ব্যবহার করে। এই ফাংশনটি পেজ লোড হওয়ার সময় সার্ভার সাইডে ডেটা ফেচ করে এবং সেই ডেটা পেজে প্রপস হিসেবে পাঠায়।

উদাহরণ: SSR ব্যবহার করে ডেটা ফেচ করা

// pages/posts/[id].js

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

// getServerSideProps ফাংশন ডেটা সার্ভার সাইডে ফেচ করবে
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const post = await res.json()

  return {
    props: {
      post
    }
  }
}

export default Post

এখানে getServerSideProps ফাংশনটি পেজের ডেটা সার্ভার সাইডে ফেচ করে এবং পেজ রেন্ডার হওয়ার সময় ডেটা প্রপস হিসেবে পাস করে।

সারাংশ

SSR হলো এমন একটি রেন্ডারিং কৌশল, যেখানে HTML সার্ভারে রেন্ডার হয়ে ক্লায়েন্টে পাঠানো হয়। এটি SEO, প্রথম লোডের পারফরম্যান্স এবং ডাইনামিক কনটেন্টের ক্ষেত্রে বিশেষভাবে গুরুত্বপূর্ণ। Next.js এর getServerSideProps ফাংশনের মাধ্যমে সহজেই SSR ব্যবহার করা যায়, যা ডেটা সার্ভার সাইডে ফেচ করে এবং পেজ রেন্ডার হওয়ার সময় প্রপস হিসেবে পাঠায়।

Next.js ডেটা ফেচ করার জন্য দুটি প্রধান মেথড সরবরাহ করে: getStaticProps এবং getServerSideProps। প্রতিটি মেথড আলাদা রকমের ডেটা রেন্ডারিং প্রক্রিয়া তৈরি করে, যা আপনার অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপিরিয়েন্সে গুরুত্বপূর্ণ ভূমিকা পালন করে।

নিচে getStaticProps এবং getServerSideProps এর মাধ্যমে ডেটা ফেচ করার বিস্তারিত ব্যাখ্যা দেওয়া হলো।

১. getStaticProps

getStaticProps একটি স্ট্যাটিক পেজ জেনারেশন ফিচার। এটি Next.js এর Static Generation এর অংশ, যেখানে ডেটা রেন্ডারিং প্রক্রিয়া সাইট বিল্ডের সময় ঘটে এবং পেজটি ব্রাউজারের জন্য স্ট্যাটিকভাবে প্রস্তুত হয়। এই পদ্ধতি সাইটের পারফরম্যান্স উন্নত করে, কারণ পেজের ডেটা একবার ফেচ করার পর, এটি বারবার একইভাবে রেন্ডার হয়।

কিভাবে কাজ করে:

• getStaticProps শুধুমাত্র Static Generation এর জন্য ব্যবহৃত হয়।
• এটি সার্ভার সাইডে রান হয় এবং স্ট্যাটিক HTML পেজ তৈরি করতে সাহায্য করে।

উদাহরণ:

ধরা যাক, আপনার একটি ব্লগ পেজ আছে এবং আপনি পোস্টের ডেটা স্ট্যাটিকভাবে ফেচ করতে চান।

// pages/posts.js

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

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

ব্যাখ্যা:

• getStaticProps: এটি API থেকে ডেটা ফেচ করে এবং props হিসেবে সেই ডেটা Posts কম্পোনেন্টে পাঠায়।
• props: { posts }: এখানে posts ডেটা কম্পোনেন্টে প্রপস হিসেবে প্রেরিত হয়, যা UI তে দেখানো হয়।

এটি Static Generation ব্যবহার করে, তাই পেজটি প্রথমবার রেন্ডার হওয়ার সময় ডেটা ফেচ হবে এবং পরবর্তী সব ভিজিটে সেই একই পেজ সরবরাহ করা হবে।

২. getServerSideProps

getServerSideProps একটি Server-side Rendering (SSR) ফিচার। এটি সাইট ভিজিট করার প্রতিবারে রেন্ডারিং হয় এবং ডেটা প্রতি রিকোয়েস্টে সার্ভার থেকে ফেচ হয়। এটি সাধারণত ডাইনামিক ডেটা ব্যবহার করার জন্য উপযুক্ত, যেখানে আপনি চান যে প্রতিবার পেজ লোড হলে ডেটা ফেচ হোক।

কিভাবে কাজ করে:

• getServerSideProps প্রতিটি পেজ রিকোয়েস্টে রান হয় এবং সার্ভার থেকে ডেটা ফেচ করে।
• এটি সাধারণত সেশন-ভিত্তিক, ব্যবহারকারীর নির্দিষ্ট ডেটা, বা অন্য কোনো ডাইনামিক কন্টেন্টের জন্য ব্যবহৃত হয়।

উদাহরণ:

ধরা যাক, আপনি ব্যবহারকারীর প্রোফাইল পেজ তৈরি করছেন, যেখানে ব্যবহারকারীর ডেটা সার্ভার থেকে প্রতি রিকোয়েস্টে ফেচ করা হবে।

// pages/profile.js

export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1')
  const user = await res.json()

  return {
    props: {
      user,
    },
  }
}

export default function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}'s Profile</h1>
      <p>Email: {user.email}</p>
    </div>
  )
}

ব্যাখ্যা:

• getServerSideProps: এখানে প্রতি রিকোয়েস্টে ব্যবহারকারীর প্রোফাইল ডেটা ফেচ করা হবে।
• context: context প্যারামিটারটি ব্যবহারকারীর রিকোয়েস্ট সম্পর্কিত তথ্য ধারণ করে, যেমন URL প্যারামিটার, কুকিজ, হেডার ইত্যাদি।
• props: { user }: ফেচ করা ডেটা user হিসেবে কম্পোনেন্টে প্রপস হিসেবে পাঠানো হয়।

এটি প্রতিটি রিকোয়েস্টে ডেটা ফেচ করবে এবং সেই অনুযায়ী পেজ রেন্ডার করবে।

getStaticProps এবং getServerSideProps এর তুলনা

সারাংশ

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

আপনি যদি স্থির ডেটা বা যেসব ডেটা মাঝে মাঝে পরিবর্তন হয়, সেগুলোর জন্য getStaticProps ব্যবহার করতে পারেন, আর যদি আপনার ডেটা প্রতিটি রিকোয়েস্টে পরিবর্তিত হয়, তাহলে getServerSideProps ব্যবহার করা উত্তম।

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 ডায়নামিক কন্টেন্টের জন্য আদর্শ। আপনি আপনার প্রজেক্টের প্রয়োজন অনুযায়ী এই দুটি পদ্ধতির মধ্যে থেকে সেরা একটি নির্বাচন করতে পারেন।