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 |
|---|---|---|
| রেন্ডারিং টাইম | বিল্ড টাইমে (Static Generation) | রিকোয়েস্ট টাইমে (Server-side Rendering) |
| ব্যবহৃত হয় | স্থির ডেটা অথবা সাইটের বিল্ড সময়ের জন্য ডেটা | ডাইনামিক ডেটা এবং সার্ভার সাইড রিকোয়েস্টের জন্য |
| পারফরম্যান্স | দ্রুত, কারণ ডেটা একবার ফেচ হয়ে যায় এবং সার্ভ করা হয় | প্রতিবার রিকোয়েস্টে ডেটা ফেচ হতে হয়, কিছুটা ধীরগতি হতে পারে |
| SEO | ভাল SEO, কারণ স্ট্যাটিক পেজ ইন্ডেক্স করা হয় | ভাল SEO, কারণ সার্ভার সাইড রেন্ডারিং হয় |
সারাংশ
getStaticPropsসাইট বিল্ডের সময় ডেটা ফেচ করে এবং সেই ডেটা দিয়ে স্ট্যাটিক পেজ তৈরি করে, যা দ্রুত লোড হয়।getServerSidePropsপ্রতিটি রিকোয়েস্টে ডেটা ফেচ করে এবং সার্ভার সাইড রেন্ডারিং করে, যা ডাইনামিক ডেটার জন্য উপযুক্ত।
আপনি যদি স্থির ডেটা বা যেসব ডেটা মাঝে মাঝে পরিবর্তন হয়, সেগুলোর জন্য getStaticProps ব্যবহার করতে পারেন, আর যদি আপনার ডেটা প্রতিটি রিকোয়েস্টে পরিবর্তিত হয়, তাহলে getServerSideProps ব্যবহার করা উত্তম।
Read more
