रिएक्ट सर्वर घटकों के साथ एक रीयल-टाइम व्यू काउंटर बनाएं

रिएक्ट सर्वर घटकों को समझना

क्लाइंट-साइड रेंडरिंग (सीएसआर)

1. उपयोगकर्ता एक साइट का अनुरोध करता है।
2. सर्वर एक HTML फ़ाइल भेजता है और CSS और JS फ़ाइलों से लिंक करता है।
3. क्लाइंट JS संसाधनों को डाउनलोड करता है।
4. क्लाइंट पृष्ठ को बिना सामग्री के प्रस्तुत करता है।
5. क्लाइंट सर्वर में एपीआई से डेटा प्राप्त करता है।
6. क्लाइंट सामग्री के साथ पृष्ठ को पुनः प्रस्तुत करता है।

सर्वर-साइड रेंडरिंग (SSR)

1. उपयोगकर्ता एक साइट का अनुरोध करता है।
2. सर्वर वास्तविक HTML फ़ाइलों को प्रस्तुत करता है लेकिन वे अभी तक इंटरैक्टिव नहीं हैं।
3. क्लाइंट JS संसाधनों को डाउनलोड करता है।
4. क्लाइंट में, hydrateRoot() का उपयोग करके फ़ंक्शन, ईवेंट श्रोता, स्थिति और रिएक्ट घटकों की अन्य अंतःक्रियाशीलता सर्वर द्वारा उत्पन्न मौजूदा DOM तत्वों से जुड़ी होती है, इसे हाइड्रेशन के रूप में जाना जाता है .
5. क्लाइंट सर्वर में एपीआई से डेटा प्राप्त करता है।
6. क्लाइंट सामग्री के साथ पृष्ठ को पुनः प्रस्तुत करता है।

• बेहतर SEO :क्योंकि खोज इंजन क्रॉलर पूरी तरह से प्रस्तुत HTML को पढ़ सकते हैं, SSR अधिक SEO-अनुकूल है।
• तेज़ प्रारंभिक लोड :चूंकि संपूर्ण HTML सामग्री सर्वर से रेंडर और भेजी जाती है, इसलिए उपयोगकर्ता पृष्ठ की सामग्री को शीघ्रता से देखते हैं।

• धीमा नेविगेशन :प्रत्येक नए पेज अनुरोध के लिए सर्वर से HTML को पूर्ण पुनः लोड करने के लिए राउंड-ट्रिप संचार की आवश्यकता होती है।
• सर्वर लोड में वृद्धि :चूंकि सर्वर पेज को प्रस्तुत करने में अधिकांश काम करता है, इसलिए उसे एकाधिक अनुरोधों को संभालने के लिए अधिक संसाधनों की आवश्यकता हो सकती है।

रिएक्ट सर्वर घटक

1. सर्वर डेटा लाता है।
2. सर्वर ऐप को सामग्री के साथ प्रस्तुत करता है।
3. क्लाइंट JS संसाधनों को डाउनलोड करता है।
4. क्लाइंट में हाइड्रेशन होता है।

• कुशल डेटा प्रबंधन: डेटा फ़ेचिंग को आपके डेटाबेस के करीब, सर्वर पर ले जाया जाता है। यह क्लाइंट-सर्वर राउंड ट्रिप को हटाकर प्रदर्शन में सुधार करता है।
• क्लाइंट पर जावास्क्रिप्ट का आकार कम किया गया :चूंकि रिएक्ट सर्वर घटक क्लाइंट को कोई जावास्क्रिप्ट नहीं भेजते हैं, इसलिए समग्र बंडल आकार कम हो जाता है, जिससे प्रदर्शन में सुधार होता है।
• तेज़ प्रारंभिक पृष्ठ लोड :सर्वर पर प्री-रेंडरिंग घटकों का मतलब है कि क्लाइंट को पूरी तरह से रेंडर किया गया HTML तेजी से प्राप्त होता है, जिससे फर्स्ट कंटेंटफुल पेंट (एफसीपी) के समय में सुधार होता है।
• बेहतर SEO :सामग्री पूरी तरह से सर्वर-साइड प्रस्तुत की गई है, जिससे खोज इंजनों के लिए सामग्री को क्रॉल और अनुक्रमित करना आसान हो जाता है।

• स्थिति और जीवनचक्र :रिएक्ट सर्वर कंपोनेंट्स के पास ब्राउज़र एपीआई (जैसे useState) तक पहुंच नहीं है , useEffect ), चूंकि वे सर्वर पर प्रस्तुत किए जाते हैं।
• कोई क्लाइंट-साइड इंटरएक्टिविटी नहीं :रिएक्ट सर्वर घटक गतिशील अद्यतन या अन्तरक्रियाशीलता के लिए नहीं हैं। आपको अपने ऐप के इंटरैक्टिव भागों के लिए क्लाइंट घटकों का उपयोग करने की आवश्यकता है।

रिएक्ट सर्वर घटकों का उपयोग करना

Next.js में रिएक्ट सर्वर घटक

• स्टेटिक रेंडरिंग (डिफ़ॉल्ट): मार्ग निर्माण समय पर प्रस्तुत किए जाते हैं , या डेटा पुनर्वैधीकरण के बाद पृष्ठभूमि में।
• गतिशील प्रतिपादन: प्रत्येक उपयोगकर्ता के लिए अनुरोध समय पर मार्ग प्रस्तुत किए जाते हैं .
• स्ट्रीमिंग: यूआई को सर्वर से उत्तरोत्तर प्रस्तुत किया जाता है।

आपको रिएक्ट सर्वर कंपोनेंट्स का उपयोग कब करना चाहिए ?

• आपके पास स्थिर, गैर-संवादात्मक सामग्री है जो बार-बार नहीं बदलती है।
• आप क्लाइंट को भेजे गए जावास्क्रिप्ट को कम करके प्रदर्शन में सुधार करना चाहते हैं।
• SEO आपके एप्लिकेशन के लिए महत्वपूर्ण है।
• आप भारी डेटा-फ़ेचिंग या कम्प्यूटेशनल कार्यों को सर्वर पर लोड करना चाहते हैं।

• आपके घटकों को क्लाइंट-साइड इंटरैक्टिविटी, स्थिति या हुक की आवश्यकता होती है।
• आपको ब्राउज़र एपीआई तक पहुंच की आवश्यकता है या वास्तविक समय अपडेट की आवश्यकता है।
• आप भारी क्लाइंट-साइड तर्क या उपयोगकर्ता-विशिष्ट सामग्री के साथ जटिल पृष्ठ बना रहे हैं।

सामान्य नुकसान

प्रोजेक्ट सेटअप

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blog

cd blog
pnpm dev

pnpm add @upstash/redis

पर्यावरण सेटअप

1. अपस्टैश कंसोल → रेडिस पर जाएं और एक नया डेटाबेस बनाएं:

1. REST API अनुभाग तक नीचे स्क्रॉल करें, .env पर स्विच करें टैब करें और अगले चरण के लिए पर्यावरण चर की प्रतिलिपि बनाएँ:

1. एक .env बनाएं अपने पर्यावरण चर को फ़ाइल और पेस्ट करें:

UPSTASH_REDIS_REST_URL=<YOUR_URL>
UPSTASH_REDIS_REST_TOKEN=<YOUR_TOKEN>

सेटअप दृश्य घटक

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>
 )
}
 

आयात और दृश्य घटक प्रदर्शित करें

...
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>
...

क्लाइंट कंपोनेंट सेटअप के साथ तुलना

• एक अलग एपीआई की आवश्यकता को हटा दिया गया।
• प्रकार की जाँच के लाभों के साथ घटक और उसके तर्क का एक सरल एकीकृत दृश्य प्रदान किया गया।

तैनाती

vercel

अंतिम शब्द