Next.js में एज फ़ंक्शंस क्या हैं? 5 तरीके आप उनका उपयोग कर सकते हैं

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

एज फंक्शन नेक्स्ट.जेएस की सबसे रोमांचक विशेषताओं में से एक है। Edge.js में एज फ़ंक्शंस और उनका उपयोग करने के पांच तरीकों के बारे में जानें।

एज फ़ंक्शंस क्या हैं?

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

एज फ़ंक्शंस अनुरोध या प्रतिक्रिया को बदल सकते हैं, डेटा प्राप्त कर सकते हैं, प्रमाणित कर सकते हैं, और बहुत कुछ।

एज फ़ंक्शंस तुरन्त चलते हैं। चूंकि वे डेटा लोड करने और पृष्ठों को प्रस्तुत करने में लगने वाले समय को कम करते हैं, आप वेब प्रदर्शन और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए एज फ़ंक्शंस का उपयोग कर सकते हैं।

आधुनिक और अगली पीढ़ी के गैजेट्स की जरूरत है एज कंप्यूटिंग क्योंकि यह अधिक भरोसेमंद और सुरक्षित है क्लाउड कम्प्यूटिंग और एज कार्यों का लाभ उठाता है। इसके अलावा, यह डिवाइस पर अकेले कंप्यूटिंग की तुलना में अधिक सक्षम और लचीला है।

यहाँ कुछ तरीके दिए गए हैं जिनसे आप Next.js में Edge प्रकार्यों का उपयोग कर सकते हैं।

1. डायनेमिक रूटिंग

Next.js में Edge प्रकार्यों का उपयोग करने का एक तरीका डायनेमिक रूटिंग है। आप डायनेमिक डेटा, जैसे क्वेरी पैरामीटर या अनुरोध हेडर के आधार पर कस्टम रूट को परिभाषित और प्रबंधित कर सकते हैं।

यह विभिन्न अनुरोधों से निपटने वाले अधिक अनुकूलनीय और गतिशील वेब एप्लिकेशन बनाने के लिए मूल्यवान है।

डायनेमिक रूटिंग को लागू करने के लिए आप नेक्स्ट.जेएस के एज फंक्शन का उपयोग निम्नलिखित तरीके से कर सकते हैं:

// पेज/एपीआई/[स्लग] .जेएस
निर्यातगलती करनासमारोहहैंडलर(अनुरोध, Res) {
कॉन्स्ट {स्लग} = अनुरोध क्वेरी;
अगर (स्लग 'के बारे में') {
 res.status (200)।भेजना('यह पृष्ठ के बारे में है!');
 } अन्यअगर (स्लग 'संपर्क करना') {
 res.status (200)।भेजना('यह संपर्क पृष्ठ है!');
 } अन्य {
 res.status (404)।भेजना('पृष्ठ नहीं मिला।');
 }
}

यह उदाहरण नामित फ़ाइल की सामग्री दिखाता है [स्लग.जेएस] में पेज/एपीआई निर्देशिका गतिशील डेटा के साथ एक कस्टम मार्ग को परिभाषित करने के लिए। स्लग बाउंड्री को तब उपयोग करके अनुरोध क्वेरी से हटा दिया जाता है req.query, जो आपको के मूल्य पर शक्तिशाली रूप से स्थापित मांगों से निपटने देता है काउंटर.

उदाहरण के लिए, यदि कोई उपयोगकर्ता जाता है http://example.com/api/about, स्लग पैरामीटर को सेट किया जाएगा के बारे में. हैंडलर फ़ंक्शन उपयुक्त कोड ब्लॉक चलाएगा और संदेश प्रदर्शित करेगा "यह पृष्ठ के बारे में है!"

अगर ग्राहक आता है http://example.com/api/contact, हैंडलर संदेश लौटाएगा "यह संपर्क पृष्ठ है!"

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

2. डेटा लाना

Next.js में, Edge प्रकार्यों के लिए एक सामान्य उपयोग मामला डेटा फ़ेचिंग है। आप डेटा को किनारे पर लाकर सर्वर पर लोड कम कर सकते हैं और वेब एप्लिकेशन के प्रदर्शन को बढ़ा सकते हैं।

जैसा कि इस उदाहरण में दिखाया गया है, Next.js के एज फ़ंक्शन डेटा फ़ेचिंग कर सकते हैं:

// पेज/एपीआई/यूजर्स/[आईडी] .जेएस
निर्यातगलती करनाasyncसमारोहहैंडलर(अनुरोध, Res) {
कॉन्स्ट {आईडी} = अनुरोध क्वेरी;
// तृतीय-पक्ष API से उपयोगकर्ता डेटा प्राप्त करें
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(` https://api.example.com/users/${आईडी}`);
कॉन्स्ट उपयोगकर्ता = इंतजार प्रतिक्रिया.जेसन ();
// उपयोगकर्ता डेटा लौटाएं
 res.status (200.json (उपयोगकर्ता);
}

यह उदाहरण एक एपीआई समापन बिंदु को परिभाषित करता है जो उपयोग करता है पहचान तृतीय-पक्ष API से उपयोगकर्ता डेटा पुनर्प्राप्त करने के लिए query पैरामीटर। का उपयोग लाना विधि, आप एपीआई के लिए एक अनुरोध भेज सकते हैं और फिर प्रतीक्षित कीवर्ड के साथ प्रतिक्रिया की प्रतीक्षा कर सकते हैं।

कोड तब कॉल करके JSON जानकारी निकालता है प्रतिक्रिया.जेसन () और इसे एक चर में संग्रहीत करता है। अंत में, यह उपयोग करता है json प्रतिक्रिया डेटा को JSON के रूप में स्वरूपित करने के लिए प्रतिक्रिया की विधि।

एज फ़ंक्शन डेटा फ़ेचिंग एक शक्तिशाली तकनीक है जो आपको किनारे पर डेटा लाने, सर्वर लोड को कम करने और वेब एप्लिकेशन प्रदर्शन में सुधार करने की अनुमति देती है।

आप इसी तरह मांग आलस्य को कम कर सकते हैं और किनारे पर बाहरी प्रोग्रामिंग इंटरफ़ेस से जानकारी प्राप्त करके ग्राहकों को तेज़, अधिक प्रतिक्रियाशील पृष्ठ प्रदान कर सकते हैं।

3. प्रमाणीकरण में प्रयुक्त

अभिगम नियंत्रण नियमों को किनारे पर लागू करके, आप अपने वेब ऐप की सुरक्षा में सुधार कर सकते हैं और संवेदनशील डेटा तक अनधिकृत पहुंच के जोखिम को कम कर सकते हैं।

उदाहरण के तौर पर, एक ऐसे फ़ंक्शन पर विचार करें जो क्लाइंट के प्रमाणीकरण स्थिति की जांच करता है और इसे प्रतिक्रिया में वापस भेजता है। नेक्स्ट.जेएस में एज क्षमताओं से जुड़े सत्यापन की रूपरेखा यहां दी गई है:

// पेज/एपीआई/ऑथ.जेएस
निर्यातगलती करना (अनुरोध, रेस) => {
कॉन्स्ट {isAuthenticated} = req.cookies;
अगर (प्रमाणित है) {
 res.status (200.json({ संदेश: 'आप प्रमाणित हैं' });
 } अन्य {
 res.status (401.json({ संदेश: 'आप प्रमाणित नहीं हैं' });
 }
}

इस उदाहरण में, एज फ़ंक्शन प्रमाणीकरण टोकन के लिए कुकी की जांच करता है और यदि पाया जाता है, तो उपयोगकर्ता की जानकारी के साथ एक JSON प्रतिक्रिया उत्पन्न करता है।

4. ए / बी टेस्ट

Next.js के Edge प्रकार्यों का उपयोग करने का दूसरा तरीका A/B परीक्षण का उपयोग करके वेब एप्लिकेशन के प्रदर्शन को अनुकूलित करना है। आप A/B परीक्षण का उपयोग करके किसी वेबसाइट या एप्लिकेशन के विभिन्न संस्करणों की तुलना करके यह निर्धारित कर सकते हैं कि कौन सा बेहतर प्रदर्शन करता है।

ए/बी परीक्षण करने के लिए नेक्स्ट.जेएस के एज कार्यों का उपयोग कैसे किया जा सकता है इसका एक उदाहरण इस प्रकार है:

// पेज/एपीआई/abtest.js
कॉन्स्ट प्रकार = ['संस्करण ए', 'वैरिएंटबी'];
निर्यातगलती करनासमारोहहैंडलर(अनुरोध, Res) {
कॉन्स्ट { userId } = req.query;
// उपयोगकर्ता के लिए एक यादृच्छिक संस्करण उत्पन्न करें
कॉन्स्ट वेरिएंटइंडेक्स = गणित।ज़मीन(गणित.random() * Variants.length);
कॉन्स्ट वेरिएंट = वेरिएंट [वेरिएंटइंडेक्स];
// वैरिएंट को कुकी में स्टोर करें
 res.setHeader('सेट-कुकी', `वैरिएंट =${वैरिएंट}; अधिकतम-आयु=604800;`);
// संबंधित संस्करण प्रस्तुत करें
अगर (संस्करण 'संस्करण ए') {
 res.status (200)।भेजना('संस्करण ए में आपका स्वागत है!');
 } अन्य {
 res.status (200)।भेजना('संस्करण बी में आपका स्वागत है!');
 }
}

यह कोड एक एपीआई इंटरफ़ेस एंडपॉइंट प्रदर्शित करता है जो साइट पेज के दो अद्वितीय विविधताओं के लिए ए/बी परीक्षण चलाता है। यह उपयोग करता है गणित.यादृच्छिक () उपयोगकर्ता के लिए एक यादृच्छिक संस्करण बनाने की विधि और इसे एक कुकी में स्टोर करता है res.setHeader तरीका। यह कोड को यह सुनिश्चित करने की अनुमति देता है कि ग्राहक भविष्य की यात्राओं में समान भिन्नता देखता है।

कोड तब उपयोग करता है प्रकार उपयुक्त संस्करण प्रस्तुत करने के लिए कुकी का मान। यह एक संदेश प्रदर्शित करता है जो दर्शाता है कि किस प्रकार का चयन किया गया है।

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

5. कैशिंग प्रतिक्रियाएं

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

यहां एक उदाहरण दिया गया है कि आप नेक्स्ट.जेएस में एज क्षमताओं के साथ रिएक्शन स्टोर कैसे कर सकते हैं:

// पेज/एपीआई/डेटा.जेएस
कॉन्स्ट डेटा = { नाम: 'जॉन डो', आयु: 30 };
निर्यातगलती करनासमारोहहैंडलर(अनुरोध, Res) {
// कैशिंग सक्षम करने के लिए प्रतिक्रिया शीर्षलेख सेट करें
 res.setHeader('कैश-नियंत्रण', 's-maxage=10, बासी-जबकि-पुनर्वैधीकरण');
// रिटर्न डेटा
 res.status (200.json (डेटा);
}

यह उदाहरण एक एपीआई एंडपॉइंट को परिभाषित करता है जो कुछ डेटा के साथ JSON प्रतिक्रिया देता है।

हम प्रतिक्रिया हेडर का उपयोग करके सेट करते हैं res.setHeader तकनीक का उपयोग करके 10 सेकंड के लिए आरक्षण सक्षम करने के लिए एस-अधिकतम-उम्र सीमा। यह इंगित करता है कि ताज़ा करने की आवश्यकता से पहले सीडीएन प्रतिक्रिया को दस सेकंड तक कैश कर सकता है।

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

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

एज फ़ंक्शंस Next.js की एक अविश्वसनीय रूप से शक्तिशाली विशेषता है

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

वेब एप्लिकेशन को बेहतर बनाने के लिए आप कई तरीकों से एज फ़ंक्शंस का उपयोग कर सकते हैं: ए / बी परीक्षण, प्रतिक्रिया कैशिंग, डायनेमिक रूटिंग, डेटा फ़ेचिंग, प्रमाणीकरण।

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