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

डेटा फ़ेचिंग एक आवश्यक विशेषता है जो डेवलपर्स को वेबसाइट/वेब एप्लिकेशन पर डेटा पुनर्प्राप्त करने और प्रदर्शित करने की अनुमति देती है। Next.js में डेटा लाने के कुछ अलग तरीके हैं, प्रत्येक के अपने फायदे और उपयोग के मामले हैं। यह लेख Next.js में डेटा लाने के विभिन्न तरीकों की खोज करेगा।

डेटा प्राप्त करने के लिए यूज इफेक्ट हुक का उपयोग करना

useEffect हुक एक है साइड इफेक्ट करने के लिए इस्तेमाल किया जाने वाला रिएक्ट हुक, जैसे घटकों में एपीआई कॉल। आप Next.js में डेटा लाने के लिए यूज इफेक्ट हुक का उपयोग कर सकते हैं।

यह हुक उन पेजों के लिए मददगार है, जिन्हें डायनेमिक डेटा की आवश्यकता होती है, जैसे उपयोगकर्ता प्रोफाइल पेज जो लॉग इन किए हुए उपयोगकर्ता को विशेष रूप से जानकारी दिखाते हैं।

UseEffect हुक का उपयोग करने के लिए, आप पहले इसे अपनी पसंद के घटक में आयात करते हैं, डेटा प्राप्त करते हैं और इसका उपयोग करके अपने पृष्ठ को प्रस्तुत करते हैं।

उदाहरण के लिए:

आयात {उपयोग प्रभाव, उपयोग स्थिति} से'प्रतिक्रिया';
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट [डेटा, सेटडाटा] = यूज़स्टेट ("");
 उपयोग प्रभाव (() => {
 लाना(' https://api.example.com/data');
 ।तब( (जवाब) => प्रतिक्रिया.जेसन ())
 ।तब( (आंकड़े) => सेटडेटा (डेटा))
 }, []); 
वापस करना (


 {डेटा.नाम}
 </div>
 )
}

यह कोड ब्लॉक API से डेटा प्राप्त करने के लिए useEffect हुक का उपयोग करता है। यदि उपयोग करने के लिए दो पैरामीटर पास करता है प्रभाव हुक: डेटा लाने के लिए एक फ़ंक्शन और एक निर्भरता सरणी। सफलता मिलने पर यह प्रयोग करता है सेटडाटा () फ़ेच अनुरोध रिटर्न वाले डेटा के साथ घटक की स्थिति को अपडेट करने के लिए।

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

SWR का उपयोग करके स्वचालित पुनर्वैधीकरण को संभालना

दपरे (बासी-जबकि-पुनर्वैधीकरण) लाइब्रेरी डेटा फ़ेचिंग को संभालने के लिए एक रिएक्ट हुक लाइब्रेरी है। आपको चाहिए SWR लाइब्रेरी सेट अप करें सबसे पहले, इसे अपने अगले एप्लिकेशन में उपयोग करने के लिए।

SWR लाइब्रेरी की प्रमुख विशेषताओं में से एक इसकी डेटा पुनर्सत्यापन को स्वचालित करने की क्षमता है। यह सुविधा तब आवश्यक होती है जब डेटा बार-बार अपडेट होता है और आपको लगातार अप-टू-डेट रहने की आवश्यकता होती है। यह कार्यक्षमता सुनिश्चित करती है कि आपके एप्लिकेशन के पास हमेशा सबसे वर्तमान डेटा तक पहुंच हो, जिससे यह आपके उपयोगकर्ताओं के लिए अधिक गतिशील और उत्तरदायी हो।

जब कोई उपयोगकर्ता किसी पृष्ठ पर फिर से फ़ोकस करता है या टैब के बीच स्विच करता है, तो SWR लाइब्रेरी API के लिए एक नया लाने का अनुरोध करती है। जब कोई उपयोगकर्ता पृष्ठ छोड़ता है, तो स्क्रीन पर प्रदर्शित डेटा पुराना हो जाता है। जब वे पृष्ठ पर लौटते हैं, तो SWR लाइब्रेरी API को एक नया लाने का अनुरोध भेजती है और यह निर्धारित करने के लिए कि क्या यह बदल गया है, पुराने डेटा के साथ नए डेटा की तुलना करती है।

एसडब्ल्यूआर लाइब्रेरी को इस क्रिया को करने से रोकने के लिए, आप इसका उपयोग कर सकते हैं revalidateOnFocus विकल्प।

जैसे इतना:

कॉन्स्ट {डेटा, त्रुटि, लोड हो रहा है} = एसडब्ल्यूआर का उपयोग करें (' https://api.example.com/data', लाने वाला, {
 पुनः सत्यापित करेंऑनफोकस: असत्य,
})

RevalidateOnFocus गुण को असत्य पर सेट करने से यह सुनिश्चित होगा कि हर बार जब आप पृष्ठ पर पुनः फ़ोकस करते हैं तो SWR लाइब्रेरी आपके डेटा को दोबारा सत्यापित नहीं करती है।

जब भी कोई उपयोगकर्ता इंटरनेट से दोबारा जुड़ता है तो SWR लाइब्रेरी डेटा को फिर से सत्यापित करती है। यह क्रिया कुछ स्थितियों में बहुत मददगार हो सकती है और स्वचालित रूप से काम करती है।

कार्रवाई को अक्षम करने के लिए, आप इसका उपयोग कर सकते हैं revalidateOnReconnect विकल्प:

कॉन्स्ट {डेटा, त्रुटि, लोड हो रहा है} = एसडब्ल्यूआर का उपयोग करें (' https://api.example.com/data', लाने वाला, {
 रीवैलिडेटऑनरीकनेक्ट: असत्य,
})

अपने डेटा के स्वत: पुन: सत्यापन को अक्षम करने के लिए, दोनों revalidateOnFocus और revalidateOnRecconect गुणों को असत्य पर सेट करें।

प्राप्त करने के अनुरोधों को पूरा करने के लिए आइसोमॉर्फिक-अनफ़ेच लाइब्रेरी का उपयोग करना

isomorphic-unfetch लाइब्रेरी एक छोटी, हल्की लाइब्रेरी है जो नेक्स्ट.जेएस एप्लिकेशन में फ़ेच अनुरोध कर सकती है। पुस्तकालय देशी के लिए एक उत्कृष्ट विकल्प है लाना एपीआई। इसका उपयोग करना आसान है, जो इसे नए डेवलपर्स के लिए लाने का अनुरोध करने के लिए एकदम सही बनाता है।

आप पुराने ब्राउज़रों के लिए पॉलीफ़िल के रूप में आइसोमॉर्फिक-अनफ़ेच का उपयोग कर सकते हैं जो देशी फ़ेच एपीआई का समर्थन नहीं करते हैं। आइसोमॉर्फिक-अनफ़ेच लाइब्रेरी न्यूनतर है और छोटे अनुप्रयोगों पर काम करने के लिए उपयुक्त है।

एक Next.js अनुप्रयोग में isomorphic-unfetch का उपयोग करने के लिए, निम्न आदेश चलाकर लाइब्रेरी स्थापित करें:

एनपीएम आइसोमॉर्फिक-अनफ़ेच स्थापित करें

फिर आप लाइब्रेरी आयात कर सकते हैं और डेटा लाने के लिए इसे अपने घटक में उपयोग कर सकते हैं, जैसे:

आयात लाना से'आइसोमॉर्फिक-अनफ़ेच'
आयात {यूज़स्टेट, यूज़एफ़ेक्ट} से'प्रतिक्रिया'
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट [डेटा, सेटडाटा] = यूज़स्टेट (व्यर्थ)
 उपयोग प्रभाव (() => {
 लाना(' https://api.example.com/data')
 ।तब( (जवाब) => प्रतिक्रिया.जेसन)
 ।तब( (आंकड़े) => सेटडेटा (डेटा))
 }, [])

अगर (!आंकड़े) वापस करना<डिव>लोड हो रहा है...डिव>
वापस करना (


{डेटा.नाम}</h1>
 </div>
 )
}

आइसोमॉर्फिक-अनफ़ेच फ़ंक्शन क्लाइंट साइड और सर्वर साइड दोनों पर काम करता है।

कुशल डेटा नेक्स्ट.जेएस के साथ लाया जा रहा है

एप्लिकेशन विकसित करते समय डेटा प्राप्त करना एक महत्वपूर्ण विशेषता है। Next.js डेटा लाने के कई तरीके प्रदान करता है, जिनमें से प्रत्येक के अपने फायदे और व्यापार-नापसंद हैं।

उपयोग करने की विधि के साथ निर्णय लेते समय, व्यापार-नापसंद पर विचार करें और सुनिश्चित करें कि आप उस तकनीक का उपयोग करें जिसके साथ आप सहज हैं।