Next.js একটি React ফ্রেমওয়ার্ক, যা Server-Side Rendering (SSR) সমর্থন করে। SSR হল এমন একটি কৌশল, যেখানে অ্যাপ্লিকেশনের HTML পেজটি সার্ভারে রেন্ডার করা হয় এবং সেই HTML ক্লায়েন্টে পাঠানো হয়। এতে পেজের প্রথম লোড দ্রুত হয় এবং সার্চ ইঞ্জিনের জন্য এটি আরও উপযুক্ত হয়, কারণ সার্ভারেই পূর্ণ HTML রেন্ডার হয়ে পাঠানো হয়।
Server-Side Rendering (SSR) কী?
Server-Side Rendering (SSR) হল একটি রেন্ডারিং প্রক্রিয়া, যেখানে React কম্পোনেন্টগুলি সার্ভারের পক্ষ থেকে রেন্ডার করা হয় এবং সম্পূর্ণ HTML ক্লায়েন্টকে পাঠানো হয়। এর মানে হল যে, ব্যবহারকারী যখন পেজটি প্রথমবার লোড করেন, তখন সার্ভার সম্পূর্ণ পেজ তৈরি করে এবং সেটি ব্রাউজারে পাঠায়। এই পদ্ধতির ফলে, React অ্যাপ্লিকেশনের প্রথম পেজটি দ্রুত লোড হয় এবং এটি সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) এর জন্য আরও কার্যকরী হয়ে ওঠে।
SSR এর মধ্যে কি ঘটে:
- Request: ব্যবহারকারী একটি URL অনুরোধ করেন (যেমন,
http://localhost:3000/বাhttp://localhost:3000/productsইত্যাদি)। - Rendering on the server: Next.js সেই রিকোয়েস্টের জন্য সার্ভারে React কম্পোনেন্ট রেন্ডার করে।
- HTML Response: সার্ভার রেন্ডার করা HTML ব্যবহারকারীর ব্রাউজারে পাঠিয়ে দেয়।
- 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 ব্যবহার করা যায়, যা ডেটা সার্ভার সাইডে ফেচ করে এবং পেজ রেন্ডার হওয়ার সময় প্রপস হিসেবে পাঠায়।
Read more
