এই টিউটোরিয়ালে, আমরা React Server Components বুঝব এবং সেই জ্ঞান দিয়ে আপনার অ্যাপের জন্য একটি সিম্পল ভিউ কাউন্টার একসাথে বানাব। ইমপ্লিমেন্টেশনের সাথে আগে যেতে চাইলে Project Setup-এ জাম্প করতে পারেন।
React Server Components বোঝা
React Server Components কীভাবে কাজ করে বুঝতে, আমরা সংক্ষেপে Client-Side Rendering (CSR) এবং Server-Side Rendering (SSR)-এ এক নজর দিব।
Client-Side Rendering (CSR)
CSR-এ, অধিকাংশ রেন্ডারিং কাজ ব্রাউজারে ক্লায়েন্ট-সাইডে হয়:
- ইউজার একটি সাইট রিকোয়েস্ট করে।
- সার্ভার একটি HTML ফাইল এবং CSS ও JS ফাইলগুলোর লিংক পাঠায়।
- ক্লায়েন্ট JS রিসোর্সগুলো ডাউনলোড করে।
- ক্লায়েন্ট কনটেন্ট ছাড়া পেজ রেন্ডার করে।
- সার্ভারে API থেকে ক্লায়েন্ট ডেটা ফেচ করে।
- ক্লায়েন্ট কনটেন্টসহ পেজ পুনরায় রেন্ডার করে।
Server-Side Rendering (SSR)
SSR-এ, সার্ভার প্রতিটি রিকোয়েস্টের জন্য পূর্ণ HTML কনটেন্ট জেনারেট করে এবং ক্লায়েন্টকে পাঠায়:
- ইউজার একটি সাইট রিকোয়েস্ট করে।
- সার্ভার আসল HTML ফাইলগুলো রেন্ডার করে কিন্তু তারা এখনো ইন্টারঅ্যাক্টিভ নয়।
- ক্লায়েন্ট JS রিসোর্সগুলো ডাউনলোড করে।
- ক্লায়েন্টে,
hydrateRoot()ফাংশন ব্যবহার করে, React কম্পোনেন্টের ইভেন্ট লিসেনার, স্টেট এবং অন্যান্য ইন্টারঅ্যাক্টিভিটি সার্ভার দ্বারা জেনারেট করা এক্সিস্টিং DOM এলিমেন্টে আট্যাচ করা হয়, এটি যেনে হাইড্রেশন। - সার্ভারে API থেকে ক্লায়েন্ট ডেটা ফেচ করে।
- ক্লায়েন্ট কনটেন্টসহ পেজ পুনরায় রেন্ডার করে।
SSR-এর সুবিধা
- বेहতর SEO: কারণ সার্চ ইঞ্জিন ক্রলার ফুলি-রেন্ডার্ড HTML পড়তে পারে, SSR বেশি SEO-ফ্রেন্ডলি।
- দ্রুত ইনিশিয়াল লোড: যেহেতু সম্পূর্ণ HTML কনটেন্ট সার্ভার থেকে রেন্ডার হয়ে পাঠানো হয়, ইউজাররা পেজের কনটেন্ট দ্রুত দেখে।
SSR-এর অসুবিধা
- স্লো নেভিগেশন: প্রতিটি নতুন পেজ রিকোয়েস্টে সার্ভার থেকে ফুল HTML রিলোডের জন্য একটি রাউন্ড-ট্রিপ কমিউনিকেশন লাগে।
- বৃদ্ধি পাওয়া সার্ভার লোড: যেহেতু সার্ভার পেজ রেন্ডার করার অধিকাংশ কাজ করে, একাধিক রিকোয়েস্ট হ্যান্ডেল করতে আরও রিসোর্স দরকার হতে পারে।
React Server Components
RSC React-এ একটি ফিচার যা কম্পোনেন্টগুলোক সম্পূর্ণরূপে সার্ভারে রেন্ডার করতে দেয়:
- সার্ভার ডেটা ফেচ করে।
- সার্ভার কনটেন্টসহ অ্যাপ রেন্ডার করে।
- ক্লায়েন্ট JS রিসোর্স ডাউনলোড করে।
- ক্লায়েন্টে হাইড্রেশন হয়।
দ্রষ্টব্য: সার্ভার কম্পোনেন্টগুলো সম্পূর্ণরূপে সার্ভারে রেন্ডার হয়, তারা JS বান্ডলে অন্তর্ভুক্ত নয় এবং তারা হাইড্রেটেড নয়। তাই স্টেপ ৩ এবং ৪ ক্লায়েন্ট কম্পোনেন্টের জন্য হয়।
RSC-এর সুবিধা
- দক্ষ ডেটা হ্যান্ডলিং: ডেটা ফেচিং সার্ভারে চলে যায়, আপনার ডেটাবেসের নিকট। এটি ক্লায়েন্ট-সার্ভার রাউন্ড ট্রিপ সরিয়ে পারফরম্যান্স উন্নত করে।
- ক্লায়েন্টে জাভাস্ক্রিপ্ট সাইজ কমানো: যেহেতু React Server Components কোনো জাভাস্ক্রিপ্ট ক্লায়েন্টে পাঠায় না, সামগ্রিক বান্ডল সাইজ কমে, পারফরম্যান্স উন্নত করে।
- দ্রুত ইনিশিয়াল পেজ লোড: সার্ভারে কম্পোনেন্ট প্রি-রেন্ডার করলে ক্লায়েন্ট ফুলি-রেন্ডার্ড HTML দ্রুত পায়, First Contentful Paint (FCP) উন্নত করে।
- উন্নত SEO: কনটেন্ট ফুলি সার্ভার-সাইড রেন্ডার হয়, সার্চ ইঞ্জিনগুলোর জন্য ক্রল এবং ইনডেক্স করা সহজ করে।
RSC-এর চ্যালেঞ্জ
- স্টেট এবং লাইফসাইকেল: React Server Components-কে ব্রাউজার API (যেমন
useState,useEffect) এক্সেস নেই, যেহেতু সেগুলো সার্ভারে রেন্ডার হয়। - ক্লায়েন্ট-সাইড ইন্টারঅ্যাক্টিভিটি নেই: React Server Components ডাইনামিক আপডেট বা ইন্টারঅ্যাক্টিভিটির জন্য নয়। আপনার অ্যাপের ইন্টারঅ্যাক্টিভ পার্টগুলোর জন্য আপনাকে Client Components ব্যবহার করতে হবে।
React Server Components ব্যবহার করা
Next.js-এ React Server Components
ডিফল্টভাবে, Next.js Server Components ব্যবহার করে। সেগুলো ৩ ভিন্নভাবে রেন্ডার হয়:
- স্ট্যাটিক রেন্ডারিং (ডিফল্ট): রুটগুলো বিল্ড টাইমে রেন্ডার হয়, বা ব্যাকগ্রাউন্ডে ডেটা রিভ্যালিডেশনের পর।
- ডাইনামিক রেন্ডারিং: রুটগুলো প্রতিটি ইউজারের জন্য রিকোয়েস্ট টাইমে রেন্ডার হয়।
- স্ট্রিমিং: UI প্রোগ্রেসিভলি সার্ভার থেকে রেন্ডার হয়।
কখন React Server Components ব্যবহার করা উচিত?
আপনাকে React Server Components ব্যবহার করা উচিত যখন:
- আপনার কাছে স্ট্যাটিক, নন-ইন্টারঅ্যাক্টিভ কনটেন্ট থাকে যা ঘন ঘন পরিবর্তন হয় না।
- আপনি ক্লায়েন্টে পাঠানো জাভাস্ক্রিপ্ট কমানো পারফরম্যান্স উন্নত করতে চান।
- SEO আপনার অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ।
- আপনি ভারী ডেটা-ফেচিং বা কম্পিউটেশনাল টাস্ক সার্ভারে অফলোড করতে চান।
আপনাকে React Server Components ব্যবহার করা উচিত নয় যখন:
- আপনার কম্পোনেন্টগুলোর ক্লায়েন্ট-সাইড ইন্টারঅ্যাক্টিভিটি, স্টেট, বা হুকস দরকার।
- আপনাকে ব্রাউজার API অ্যাক্সেস বা রিয়েল-টাইম আপডেট দরকার।
- আপনি ভاری ক্লায়েন্ট-সাইড লজিক বা ইউজার-স্পেসিফিক কনটেন্টসহ জটিল পেজ বানাচ্ছেন।
সাধারণ পিটফল
Client Components সম্পূর্ণরূপে ক্লায়েন্টে রেন্ডার হয় না
সেগুলো ক্লায়েন্ট এবং সার্ভার দুটোই রেন্ডার হয়। সেগুলো Client Components বলা হয় Server Components থেকে ডিফারেনশিয়েট করার জন্য।
'use server' ডিরেক্টিভ Server Actions-র জন্য
ডিফল্টভাবে, Next.js Server Components ব্যবহার করে তাই আপনাকে কিছু নির্দিষ্ট করার প্রয়োজন নেই। আপনি যদি Client Components ব্যবহার করতে চান, তবে 'use client' ডিরেক্টিভ যোগ করুন Server এবং Client মডিউলের মাঝপথে একটি বাউন্ডারি ডিক্লেয়ার করতে। 'use server' একটি সম্পূর্ণ ভিন্ন ডিরেক্টিভ যা Server Actions-র জন্য ব্যবহৃত হয়, যা এই ব্লগপোস্টের স্কোপের বাইরে।
প্রজেক্ট সেটআপ
আমরা Vercel-এর Blog টেমপ্লেট ব্যবহার করব:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blogআপনি লোকালি উদাহরণটি রান করে দেখতে পারেন কীভাবে দেখে:
cd blog pnpm devআসুন @upstash/redis ইনস্টল করি:
pnpm add @upstash/redisএনভায়রনমেন্ট সেটআপ
- Upstash Console → Redis-এ যান এবং একটি নতুন ডেটাবেস তৈরি করুন:
- REST API সেকশন পর্যন্ত স্ক্রোল করুন,
.envট্যাবে স্যুইচ করুন এবং পরবর্তী स्टেপের জন্য এনভায়রনমেন্ট ভেরিয়েবলগুলো কপি করুন:
- একটি
.envফাইল তৈরি করুন এবং আপনার এনভায়রনমেন্ট ভেরিয়েবলগুলো পেস্ট করুন:
UPSTASH_REDIS_REST_URL= UPSTASH_REDIS_REST_TOKEN= Views কম্পোনেন্ট সেটআপ
/app/components/views.tsx তৈরি করুন:
import { headers } from 'next/headers' import { Redis } from "@upstash/redis" const redis = Redis.fromEnv(); async function view(slug: string, ip: string) { // Hash the IP address to anonymize it const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(ip)); const hash = Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join(""); // Deduplicate views const newView = await redis.set(`deduplicate:${hash}:${slug}`, true, { nx: true, // Only set the key if it doesn't exist ex: 24 * 60 * 60, // Expire the key after 24 hours }); if (newView) { await redis.incr(`pageviews:${slug}`); // Increment the view count } } export default async function Views({ slug }: { slug: string }) { // Get the IP address of the user const header = headers() const ip = (header.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0] // Increment the view count await view(slug, ip) // Get the view count const views = await redis.get(`pageviews:${slug}`) || 0 return ( {views} views
) } Views কম্পোনেন্ট ইম্পোর্ট এবং ডিসপ্লে করুন
/app/blog/[slug]/page.tsx এডিট করুন:
... import Views from 'app/components/views' ... {formatDate(post.metadata.publishedAt)}
https://localhost:3000/blog/vim ভিজিট করুন ভিউ কাউন্টার একশনে দেখতে:
Client Components সেটআপের সাথে তুলনা
আমাদের ব্লগপোস্ট "Adding a View Counter to your Next.js Blog" চেক আউট করুন Client Components-এ ইমপ্লিমেন্টেশন দেখতে।
পূর্বে উল্লিখিত অন্যান্য সুবিধাগুলোর পাশাপাশি, React Server Components ব্যবহার করে:
- একটি আলাদা API-এর প্রয়োজনীয়তা সরিয়ে দিয়েছে।
- কম্পোনেন্ট এবং এর লজিকের একটি সিম্পল यুনিফাইড ভিউ প্রদান করেছে টাইপ চেকিং-এর সুবিধাসহ।
ডিপ্লয়
আপনি আপনার সাইট Vercel-এ নিচের কমান্ড দিয়ে ডিপ্লয় করতে পারেন:
vercelশেষ কথা
Server এবং Client Components দুটোর শক্তি কম্বাইন করে, আপনি আপনার অ্যাপ্লিকেশনগুলোর মধ্যে পারফরম্যান্স এবং ইন্টারঅ্যাক্টিভিটির মাঝপথে সঠিক ব্যালেন্স স্থাপন করতে পারেন। আশা করি এই গাইড আপনাকে React Server Components কার্যকরভাবে কখন লিভারেজ করতে হবে সে সম্পর্কে ইনফর্মড সিদ্ধান্ত নেওয়া সাহায্য করবে।
