প্রতিক্রিয়া সার্ভার উপাদানগুলির সাথে একটি রিয়েল-টাইম ভিউ কাউন্টার তৈরি করুন৷

এই টিউটোরিয়ালে, আমরা React Server Components বুঝব এবং সেই জ্ঞানের সাহায্যে একসাথে আপনার অ্যাপের জন্য একটি সাধারণ ভিউ কাউন্টার তৈরি করুন। আপনি যদি বাস্তবায়নের সাথে এগিয়ে যেতে চান তাহলে নির্দ্বিধায় প্রকল্প সেটআপে যান৷

প্রতিক্রিয়া সার্ভার উপাদান বোঝা

প্রতিক্রিয়া সার্ভার উপাদানগুলি কীভাবে কাজ করে তা বোঝার জন্য, আমরা সংক্ষেপে ক্লায়েন্ট-সাইড রেন্ডারিং (CSR) এবং সার্ভার-সাইড রেন্ডারিং (SSR) দেখব।

ক্লায়েন্ট-সাইড রেন্ডারিং (CSR)

CSR-এ, বেশিরভাগ রেন্ডারিং কাজ ক্লায়েন্ট-সাইডে ব্রাউজারে ঘটে:

1. ব্যবহারকারী একটি সাইটের অনুরোধ করে৷
৷
2. সার্ভার একটি HTML ফাইল পাঠায় এবং CSS এবং JS ফাইলের সাথে লিঙ্ক করে।
3. ক্লায়েন্ট JS সম্পদ ডাউনলোড করে।
4. ক্লায়েন্ট বিষয়বস্তু ছাড়াই পৃষ্ঠাটি রেন্ডার করে।
5. ক্লায়েন্ট সার্ভারে API থেকে ডেটা নিয়ে আসে।
6. ক্লায়েন্ট কন্টেন্ট সহ পৃষ্ঠাটি পুনরায় রেন্ডার করে।

সার্ভার-সাইড রেন্ডারিং (SSR)

SSR-এ, সার্ভার প্রতিটি অনুরোধের জন্য সম্পূর্ণ HTML সামগ্রী তৈরি করে এবং ক্লায়েন্টকে পাঠায়:

1. ব্যবহারকারী একটি সাইটের অনুরোধ করে৷
৷
2. সার্ভার প্রকৃত HTML ফাইলগুলিকে রেন্ডার করে কিন্তু সেগুলি এখনও ইন্টারেক্টিভ নয়৷
৷
3. ক্লায়েন্ট JS সম্পদ ডাউনলোড করে।
4. ক্লায়েন্টে, hydrateRoot() ব্যবহার করে ফাংশন, ইভেন্ট শ্রোতা, রাষ্ট্র এবং প্রতিক্রিয়া উপাদানগুলির অন্যান্য ইন্টারঅ্যাক্টিভিটি সার্ভার দ্বারা উত্পন্ন বিদ্যমান DOM উপাদানগুলির সাথে সংযুক্ত থাকে, এটি হাইড্রেশন নামে পরিচিত .
5. ক্লায়েন্ট সার্ভারে API থেকে ডেটা নিয়ে আসে।
6. ক্লায়েন্ট কন্টেন্ট সহ পৃষ্ঠাটি পুনরায় রেন্ডার করে।

এসএসআর-এর সুবিধা

• আরো ভালো এসইও :যেহেতু সার্চ ইঞ্জিন ক্রলাররা সম্পূর্ণরূপে রেন্ডার করা HTML পড়তে পারে, তাই SSR আরও SEO-বান্ধব৷
• দ্রুত প্রাথমিক লোড :যেহেতু সম্পূর্ণ HTML বিষয়বস্তু সার্ভার থেকে রেন্ডার করা হয় এবং পাঠানো হয়, ব্যবহারকারীরা দ্রুত পৃষ্ঠার বিষয়বস্তু দেখতে পায়।

এসএসআর-এর অসুবিধাগুলি

• ধীরে নেভিগেশন :প্রতিটি নতুন পৃষ্ঠার অনুরোধের জন্য সার্ভার থেকে HTML এর সম্পূর্ণ পুনরায় লোডের জন্য একটি রাউন্ড-ট্রিপ যোগাযোগের প্রয়োজন৷
• বর্ধিত সার্ভার লোড :যেহেতু সার্ভার পৃষ্ঠা রেন্ডার করার বেশিরভাগ কাজ করে, তাই একাধিক অনুরোধগুলি পরিচালনা করার জন্য এটির আরও সংস্থান প্রয়োজন হতে পারে৷

প্রতিক্রিয়া সার্ভার উপাদান

RSC হল React এর একটি বৈশিষ্ট্য যা সার্ভারে সম্পূর্ণরূপে রেন্ডার করার অনুমতি দেয়:

1. সার্ভার ডেটা আনে৷
৷
2. সার্ভার অ্যাপটিকে সামগ্রী সহ রেন্ডার করে৷
৷
3. ক্লায়েন্ট JS সম্পদ ডাউনলোড করে।
4. ক্লায়েন্টের মধ্যে হাইড্রেশন ঘটে।

দ্রষ্টব্য: সার্ভারের উপাদানগুলি সার্ভারে সম্পূর্ণরূপে রেন্ডার করা হয়, সেগুলি JS বান্ডেলে অন্তর্ভুক্ত নয় এবং সেগুলি হাইড্রেটেড নয়৷ সুতরাং ক্লায়েন্ট উপাদানগুলির জন্য ধাপ 3 এবং 4 ঘটবে৷

RSC এর সুবিধাগুলি

• দক্ষ ডেটা হ্যান্ডলিং: ডেটা আনয়ন সার্ভারে সরানো হয়, আপনার ডাটাবেসের কাছাকাছি। এটি ক্লায়েন্ট-সার্ভার রাউন্ড ট্রিপ সরিয়ে কর্মক্ষমতা উন্নত করে।
• ক্লায়েন্টে জাভাস্ক্রিপ্টের আকার হ্রাস করা হয়েছে :যেহেতু রিঅ্যাক্ট সার্ভার কম্পোনেন্ট ক্লায়েন্টকে কোনো জাভাস্ক্রিপ্ট পাঠায় না, তাই সামগ্রিক বান্ডেলের আকার কমে যায়, কর্মক্ষমতা উন্নত হয়।
• দ্রুত প্রাথমিক পৃষ্ঠা লোড৷ :সার্ভারে প্রি-রেন্ডারিং কম্পোনেন্ট মানে ক্লায়েন্ট সম্পূর্ণভাবে রেন্ডার করা এইচটিএমএল দ্রুত পায়, ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এর জন্য সময় উন্নত করে।
• উন্নত এসইও :বিষয়বস্তু সম্পূর্ণরূপে সার্ভার-সাইডে রেন্ডার করা হয়েছে, যা সার্চ ইঞ্জিনগুলির জন্য সামগ্রী ক্রল এবং সূচীকরণের জন্য সহজ করে তোলে৷

আরএসসির চ্যালেঞ্জ

• রাষ্ট্র এবং জীবনচক্র :প্রতিক্রিয়া সার্ভারের উপাদানগুলির ব্রাউজার APIগুলিতে অ্যাক্সেস নেই (যেমন useState৷ , useEffect ), যেহেতু সেগুলি সার্ভারে রেন্ডার করা হয়।
• কোন ক্লায়েন্ট-সাইড ইন্টারঅ্যাকটিভিটি নেই :প্রতিক্রিয়া সার্ভার উপাদানগুলি গতিশীল আপডেট বা ইন্টারঅ্যাক্টিভিটির জন্য নয়৷ আপনার অ্যাপের ইন্টারেক্টিভ অংশগুলির জন্য আপনাকে ক্লায়েন্ট উপাদানগুলি ব্যবহার করতে হবে৷

প্রতিক্রিয়া সার্ভার উপাদান ব্যবহার করা

Next.js-এ সার্ভারের কম্পোনেন্ট রিঅ্যাক্ট করুন

ডিফল্টরূপে, Next.js সার্ভার উপাদান ব্যবহার করে। এগুলি 3টি ভিন্ন উপায়ে রেন্ডার করা হয়:

• স্ট্যাটিক রেন্ডারিং (ডিফল্ট): রুটগুলি বিল্ড টাইমে রেন্ডার করা হয় , অথবা ডেটা পুনঃপ্রমাণ করার পরে ব্যাকগ্রাউন্ডে।
• ডাইনামিক রেন্ডারিং: অনুরোধের সময় প্রতিটি ব্যবহারকারীর জন্য রুট রেন্ডার করা হয় .
• স্ট্রিমিং: সার্ভার থেকে UI ক্রমান্বয়ে রেন্ডার করা হয়।

আপনি কখন প্রতিক্রিয়া সার্ভার উপাদান ব্যবহার করবেন ?

আপনার প্রতিক্রিয়া সার্ভার উপাদান ব্যবহার করা উচিত যখন :

• আপনার কাছে স্ট্যাটিক, অ-ইন্টারেক্টিভ কন্টেন্ট আছে যা ঘন ঘন পরিবর্তন হয় না।
• ক্লায়েন্টকে পাঠানো জাভাস্ক্রিপ্ট কমিয়ে আপনি কর্মক্ষমতা উন্নত করতে চান।
• SEO আপনার আবেদনের জন্য গুরুত্বপূর্ণ।
• আপনি সার্ভারে ভারী ডেটা-ফেচিং বা গণনামূলক কাজগুলি অফলোড করতে চান৷

যখন আপনার সার্ভার উপাদান প্রতিক্রিয়া করা উচিত নয় :

• আপনার উপাদানগুলির জন্য ক্লায়েন্ট-সাইড ইন্টারঅ্যাক্টিভিটি, স্টেট বা হুক প্রয়োজন৷
• আপনার ব্রাউজার API-এ অ্যাক্সেস প্রয়োজন বা রিয়েল-টাইম আপডেটের প্রয়োজন।
• আপনি ভারী ক্লায়েন্ট-সাইড লজিক বা ব্যবহারকারী-নির্দিষ্ট বিষয়বস্তু সহ জটিল পৃষ্ঠাগুলি তৈরি করছেন৷

সাধারণ ক্ষতি

ক্লায়েন্টের উপাদানগুলি সম্পূর্ণরূপে ক্লায়েন্টে রেন্ডার করা হয় না৷

এগুলি ক্লায়েন্ট এবং সার্ভার উভয়েই রেন্ডার করা হয়। সার্ভার উপাদান থেকে আলাদা করার জন্য তাদের নাম দেওয়া হয়েছে ক্লায়েন্ট কম্পোনেন্ট।

‘use server’ নির্দেশিকা সার্ভার অ্যাকশনের জন্য

ডিফল্টরূপে, Next.js সার্ভার উপাদান ব্যবহার করে তাই আপনাকে কিছু নির্দিষ্ট করতে হবে না। আপনি যদি ক্লায়েন্ট উপাদান ব্যবহার করতে চান, তাহলে আপনি ‘use client’ যোগ করুন সার্ভার এবং ক্লায়েন্ট মডিউলগুলির মধ্যে একটি সীমানা ঘোষণা করার নির্দেশ। ‘use server’ সার্ভার অ্যাকশনের জন্য ব্যবহৃত একটি সম্পূর্ণ ভিন্ন নির্দেশিকা , যা এই ব্লগপোস্টের সুযোগের বাইরে।

প্রকল্প সেটআপ

আমরা Vercel:

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

পরিবেশ সেটআপ

1. Upstash Console → Redis-এ যান এবং একটি নতুন ডেটাবেস তৈরি করুন:

1. REST API বিভাগে স্ক্রোল করুন, .env-এ স্যুইচ করুন ট্যাব এবং পরবর্তী ধাপের জন্য পরিবেশ ভেরিয়েবল অনুলিপি করুন:

1. একটি .env তৈরি করুন আপনার পরিবেশ ভেরিয়েবল ফাইল করুন এবং পেস্ট করুন:

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

সেটআপ ভিউ কম্পোনেন্ট

/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<number>(`pageviews:${slug}`) || 0
 return (
 <p className="text-sm text-neutral-600 dark:text-neutral-400">
 {views} views
 </p>
 )
}
 

ভিউ কম্পোনেন্ট আমদানি এবং প্রদর্শন করুন

/app/blog/[slug]/page.tsx সম্পাদনা করুন :

...
import Views from 'app/components/views'
...
 <div className="flex justify-between items-center mt-2 mb-8 text-sm">
 <p className="text-sm text-neutral-600 dark:text-neutral-400">
 {formatDate(post.metadata.publishedAt)}
 </p>
 <Views slug={post.slug} />
 </div>
...

ভিউ কাউন্টারটি কার্যকরী দেখতে http://localhost:3000/blog/vim এ যান:

ক্লায়েন্ট উপাদান সেটআপের সাথে তুলনা করা

ক্লায়েন্ট উপাদানগুলির সাথে বাস্তবায়ন দেখতে আমাদের ব্লগপোস্ট "আপনার Next.js ব্লগে একটি ভিউ কাউন্টার যোগ করা" দেখুন৷

পূর্ববর্তী বিভাগে উল্লিখিত অন্যান্য সুবিধাগুলির সাথে, প্রতিক্রিয়া সার্ভার উপাদানগুলি ব্যবহার করে:

• একটি পৃথক API এর প্রয়োজনীয়তা সরানো হয়েছে।
• টাইপ চেকিংয়ের সুবিধার সাথে উপাদান এবং এর যুক্তির একটি সাধারণ ইউনিফাইড ভিউ প্রদান করেছে।

নিয়োজিত করুন

আপনি নিম্নলিখিত কমান্ডের মাধ্যমে আপনার সাইটকে Vercel-এ স্থাপন করতে পারেন:

vercel

চূড়ান্ত শব্দ

সার্ভার এবং ক্লায়েন্ট উভয় উপাদানের শক্তি একত্রিত করে, আপনি আপনার অ্যাপ্লিকেশনগুলিতে কর্মক্ষমতা এবং ইন্টারঅ্যাক্টিভিটির মধ্যে সঠিক ভারসাম্য বজায় রাখতে পারেন। আমি আশা করি এই নির্দেশিকা আপনাকে কখন কার্যকরভাবে রিঅ্যাক্ট সার্ভার কম্পোনেন্ট ব্যবহার করতে হবে সে সম্পর্কে জ্ঞাত সিদ্ধান্ত নিতে সাহায্য করবে।