हल: getserversideprops

ज़रूर, मैं लेख का मसौदा तैयार करना शुरू करूँगा।

GetServerSideProps लोकप्रिय ओपन-सोर्स JavaScript लाइब्रेरी, Next.js की एक सुविधा है। यह सुविधा सर्वर-साइड पर डेटा लाने की अनुमति देती है, हर अनुरोध पर पेज जेनरेशन जैसे ऑपरेशन करने का जादू प्रदान करती है जो अंततः एसईओ और उपयोगकर्ता अनुभव को बढ़ाने में मदद करती है।

   export async function getServerSideProps(context) {
       const res = await fetch(`https://.../data`);
       const data = await res.json();

       if (!data) {
           return {
               notFound: true,
           }
       }

       return {
           props: { data },
       }
}

जब आपके Next.js एप्लिकेशन में एकीकृत किया जाता है, तो getServerSideProps आपके डेटा स्रोत पर कॉल ट्रिगर करता है, डेटा वापस आने के बाद केवल पेज को रेंडर करता है। यह तेज़ पेज लोड और अधिक प्रतिक्रियाशील एप्लिकेशन की धारणा में योगदान देता है।

GetServerSideProps फ़ंक्शन को समझना

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

उपरोक्त नमूना कोड में, फ़ंक्शन 'getServerSideProps' एक सर्वर से डेटा प्राप्त करता है। यह डेटा फिर रिएक्ट घटक के लिए एक प्रोप के रूप में पारित किया जाता है और सर्वर पर प्रीकैश किया जाता है, जो यूआई को आसानी से अपडेट और रेंडर करने की अनुमति देता है।

GetServerSideProps के लाभ और उपयोग

मुख्य लाभ का सुधार है एसईओ. एक खाली पृष्ठ प्राप्त करने के बजाय, वेब क्रॉलर को एक पूर्ण रूप से प्रस्तुत पृष्ठ मिलता है। यह आपकी वेबसाइट को अधिक अनुक्रमणीय बनाता है और खोज इंजन परिणाम पृष्ठों पर इसकी रैंकिंग में सुधार करता है।
यह उपयोगकर्ता अनुभव को भी बेहतर बनाता है। धीमे कनेक्शन पर, उपयोगकर्ताओं को आमतौर पर एक खाली या लोडिंग स्क्रीन दिखाई दे सकती है। हालाँकि, getServerSideProps के साथ, वे तुरंत एक प्रस्तुत पृष्ठ देखते हैं।

   export async function getServerSideProps(context) {
       const { params, req, res, query } = context 
       // Perform server-side operations 
       return {
           props: {},
       }
}

उपरोक्त उदाहरण में, 'संदर्भ' पैरामीटर कुंजियों वाला एक ऑब्जेक्ट है जिसका उपयोग सर्वर-साइड संचालन के लिए किया जा सकता है।

  • पैरामीटर: गतिशील मार्गों का उपयोग करने वाले पृष्ठों के लिए मार्ग पैरामीटर शामिल हैं।
  • अनुरोध: http.IncomingMessage का एक उदाहरण, साथ ही कुछ पूर्व-निर्मित मिडलवेयर
  • रेस: http.ServerResponse का एक उदाहरण
  • क्वेरी: क्वेरी स्ट्रिंग का प्रतिनिधित्व करने वाली एक वस्तु।

प्रदर्शन, एसईओ अनुकूलन और उत्कृष्ट उपयोगकर्ता अनुभव को मिश्रित करने वाले वेब एप्लिकेशन बनाना एक जटिल कार्य है, लेकिन नेक्स्ट.जेएस से getServerSideProps जैसी सुविधाओं के साथ, ये लक्ष्य अधिक प्राप्य हो जाते हैं।

पुस्तकालय और कार्य शामिल

समाधान में शामिल मुख्य फ़ंक्शन getServerSideProps है, जो एक Next.js विशिष्ट फ़ंक्शन है। इस सुविधा में एक अंतर्निर्मित शामिल है लाना() फ़ंक्शन, XMLHttpRequest का एक आधुनिक विकल्प। फ़ेच() के साथ उपयोग किए जाने वाले प्रतीक्षा ऑपरेटर का उपयोग उस वादे की प्रतीक्षा करने के लिए किया जाता है जिसे वह हल करने के लिए वापस आता है।

याद रखें, नेक्स्ट.जेएस और इसके सर्वर-साइड रेंडरिंग फीचर जैसे आपके पास उपलब्ध टूल को समझना, ऐसे एप्लिकेशन बनाने के लिए महत्वपूर्ण है जो न केवल अच्छी तरह से काम करते हैं बल्कि एसईओ परिप्रेक्ष्य से भी अच्छा प्रदर्शन करते हैं। जावास्क्रिप्ट और एसईओ के मजबूत युग्मन के साथ, Next.js जैसे टूल और getServerSideProps जैसी सुविधाओं के महत्व को कम करके आंका नहीं जा सकता है।

संबंधित पोस्ट:

एक टिप्पणी छोड़ दो