Next.js सर्वर क्रियाओं का उपयोग कैसे करें

Next.js की 13.4 रिलीज़ एक स्थिर ऐप राउटर और सर्वर क्रियाओं के साथ डेटा म्यूटेशन करने की क्षमता के साथ आई थी। यह सुविधा पूरी तरह से गेम चेंजर है क्योंकि यह आपको पूरी तरह से सर्वर घटकों से डेटा म्यूटेशन करने की सुविधा देती है। इससे ऐप की गति, सुरक्षा और समग्र प्रदर्शन जैसे क्षेत्रों में कई लाभ मिलते हैं।

जानें कि सर्वर क्रियाएँ क्या हैं और अपने Next.js एप्लिकेशन में इस नई सुविधा का उपयोग कैसे करें।

सर्वर क्रियाएँ क्या हैं?

सर्वर क्रियाएँ आपको अपने सर्वर घटकों के साथ-साथ एक-ऑफ़ सर्वर-साइड फ़ंक्शंस लिखने की अनुमति देती हैं। यह बहुत बड़ा है क्योंकि अब आपको फॉर्म सबमिट करते समय या किसी अन्य प्रकार का डेटा म्यूटेशन करते समय एपीआई रूट लिखने की आवश्यकता नहीं है ग्राफक्यूएल डेटा उत्परिवर्तन.

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

सर्वर क्रियाएँ उदाहरण

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

यहाँ आयात हैं:

आयात जोड़ना से"अगला/लिंक"
आयात फॉर्मग्रुप से"@/घटक/फॉर्मग्रुप"
आयात { पुनर्वैध टैग } से"अगला/कैश"
आयात {रीडायरेक्ट } से"अगला/नेविगेशन"

अब पोस्ट बनाने के लिए कोड की आवश्यकता है। यह फ़ंक्शन एक सर्वर क्रिया है; यह सर्वर पर चलता है और पोस्ट का शीर्षक और बॉडी एपीआई को भेजता है (जो डेटाबेस में पोस्ट बनाता है):

asyncसमारोहपोस्ट बनाएं(आंकड़े) {
"सर्वर का उपयोग करें"
कॉन्स्ट शीर्षक = डेटा.प्राप्त("शीर्षक")
कॉन्स्ट बॉडी = डेटा.गेट("शरीर")
इंतजार लाना(" http://127.0.0.1/posts", {
 शीर्षलेख: {"सामग्री प्रकार": "एप्लिकेशन/जेएसओएन"},
 विधि: पोस्ट,
 शरीर: JSON.stringify({शीर्षक, बॉडी})
 })
 पुनर्वैधीकरणटैग("पोस्ट")
 रीडायरेक्ट("/")
}

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

नया पोस्ट शीर्षक और मुख्य भाग एकत्र करने के लिए यहां एक फॉर्म है:

निर्यातगलती करना न्यूपोस्टफॉर्म() {
वापस करना (





"शीर्षक">शीर्षक</label>
"मूलपाठ" नाम="शीर्षक" आईडी="शीर्षक" />
 </FormGroup>
 </div>




"शीर्षक">शरीर</label>
"टेक्स्ट" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br>  सहेजें <<span>/बटन></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>आप देख सकते हैं कि फ़ॉर्म में पोस्ट के निर्माण से संबंधित कोई तर्क नहीं है, केवल एक फ़ॉर्म कार्रवाई है: <strong>createPost()</strong> फ़ंक्शन। याद रखें कि createPost फ़ंक्शन में "सर्वर का उपयोग करें" निर्देश है जो घोषित करता है कि उसमें सब कुछ है फ़ंक्शन सर्वर पर चलना चाहिए।</p> <p>सभी कोड सर्वर पर चल रहे हैं, और आपके क्लाइंट को कुछ भी नहीं पता है इसके बारे में। ऐसा इसलिए है क्योंकि फॉर्म एक सर्वर घटक है और इसमें ऐसा कुछ भी नहीं है जिसे गतिशील रूप से प्रस्तुत किया जा रहा हो क्लाइंट।</p> <p>जब आप <strong>सहेजें</strong> बटन पर क्लिक करते हैं, तो Next.js <strong>createPost()</strong> को कॉल करता है समारोह। यह शीर्षक और बॉडी को फॉर्म डेटा के रूप में भेजता है, जो जानकारी को सहेजने के लिए स्थानीय एपीआई पर पोस्ट किया जाता है।</p> <h2 id="revalidating-the-post"> पोस्ट को पुनः मान्य करना </h2> <p><strong>createPost()</strong> फ़ंक्शन के नीचे कोड की निम्नलिखित पंक्ति है:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /कोड> पूर्व> <p>यह समझने के लिए कि वह फ़ंक्शन क्या करता है, कल्पना करें कि आपके पास एक पोस्ट पेज है। पोस्ट घटक के अंदर, आप अपने डेटाबेस से सभी पोस्ट प्राप्त करने और उन्हें उपयोगकर्ता के देखने के लिए प्रस्तुत करने के लिए <strong>getPosts()</strong> नामक एक फ़ंक्शन को कॉल करेंगे:</p> <pre> <span>निर्यात</span> <span>डिफ़ॉल्ट</span> <span>async</span> <span><span>फ़ंक्शन</span> <span>पोस्ट</span>() स्पैन>{<br> <span>const</span> पोस्ट = <span>प्रतीक्षा</span> getPosts()</span></pre></code><p><code> <span>रिटर्न</span> (<br> <div>
<br> {posts.map(<span><span>पोस्ट</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p><strong>getPosts()</strong> फ़ंक्शन इस तरह दिखेगा:</p> <pre> <code><span>async</span> <span><span>फ़ंक्शन</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>प्रतीक्षा</span> फ़ेच(<span>" https://127.0.0.1/posts? सॉर्ट=शीर्षक"</span>, {<br> अगला: {<span>टैग</span>: [<span>"पोस्ट"</span>], <span>पुनः मान्य करें</span>: <span>3600</span> }<br> })</code><p><code> <span>रिटर्न</span> res.json()<br>}<br></code> </p></pre> <p>यह फ़ंक्शन लाने के लिए <strong>अगला</strong> विकल्प पास करता है, जिससे आप पुनर्वैधीकरण अवधि निर्धारित कर सकते हैं। डिफ़ॉल्ट रूप से, सर्वर घटक के अंदर आपके द्वारा किया गया प्रत्येक फ़ेच अनुरोध हमेशा के लिए कैश किया जाता है। कैश का ट्रैक रखना और आवश्यकता पड़ने पर उसे ताज़ा करना <span>डेटा लाने का एक महत्वपूर्ण हिस्सा है Next.js</span>।</p> <p>उपरोक्त कोड Next.js को <strong>पोस्ट</strong> डेटा को एक घंटे तक कैश करने के लिए कहता है (3,600 सेकंड)। एक घंटे के बाद, डेटा पुराना हो जाता है और Next.js डेटाबेस से नवीनतम डेटा प्राप्त करने के लिए इसे ताज़ा करता है।</p> <p>याद रखें कि <strong>createPost()</strong> फ़ंक्शन अपना शेष कार्य पूरा करने के बाद <strong>revalidateTag("posts")</strong> को कॉल करता है। यह Next.js को उस डेटा को दोबारा लाने के लिए मजबूर करता है जिसमें ऐप द्वारा अभी बनाया गया नया पोस्ट शामिल होना चाहिए।</p> <h2 id="सबूत-कि-आपका-कोड-सर्वर पर चल रहा है"> सबूत है कि आपका कोड सर्वर पर चल रहा है </h2> <p>यह सुनिश्चित करने के लिए कि सभी कोड सर्वर पर चल रहे हैं, आप निम्न कंसोल लॉग स्टेटमेंट को अंदर जोड़ सकते हैं <strong>createPost()</strong> फ़ंक्शन:</p> <pre> <code><span>कंसोल</span>.log(<span>"सर्वर पर चल रहा है"</span>)</code> पूर्व> <p>फिर, सबमिट बटन पर क्लिक करके एक नई पोस्ट बनाने का प्रयास करें। यदि आपका कोड सर्वर पर चल रहा है, तो वह लॉग संदेश आपके टर्मिनल पर दिखाई देगा। लेकिन अगर यह क्लाइंट पर चल रहा है, तो लॉग ब्राउज़र कंसोल में दिखाई देगा।</p> <p>इससे सेंसिटिव डालना सुरक्षित हो जाता है सर्वर पर पर्यावरणीय चर, डेटाबेस कनेक्शन और पासवर्ड जैसी जानकारी के उजागर होने के डर के बिना ग्राहक। फिर आप अपने Next.js ऐप में <span>अपनी .env फ़ाइल से स्ट्रिंग्स पढ़ सकते हैं</span>।</p> <p>आप ऐसा कर सकते हैं नेक्स्ट.जेएस के 13.4 से बाद के संस्करणों के लिए सर्वर क्रियाओं का उपयोग आरक्षित रखना चाहते हैं, विशेषकर में उत्पादन। लेकिन यह देखना अभी भी वास्तव में रोमांचक है कि यह सुविधा कहाँ तक जाती है क्योंकि यह लगातार इस बात पर ज़ोर दे रही है कि आप अधिक से अधिक सामग्री को सर्वर पर ले जाकर क्या कर सकते हैं। इससे आपके क्लाइंट ऐप्स को लिखना आसान हो जाएगा, और उन्हें विकसित करने की प्रक्रिया अधिक मनोरंजक हो जाएगी।</p> <h2 id="learn-more-about-migrating-to-next-js"> Next पर माइग्रेट करने के बारे में और जानें .js </h2> <p>कई फ्रंट-एंड डेवलपर्स यूआई विकास के लिए रिएक्ट का उपयोग करते हैं। लेकिन सर्वर-साइड रेंडरिंग और स्टैटिक साइट जेनरेशन जैसी सुविधाओं के लिए धन्यवाद, इनमें से बहुत से डेवलपर नेक्स्ट.जेएस का उपयोग करने के लिए अपने ऐप्स को माइग्रेट कर रहे हैं। यह माइग्रेशन बहुत सीधा है क्योंकि रिएक्ट सिंटैक्स-वार नेक्स्ट.जेएस के समान है।</p> <p>अतिरिक्त प्रदर्शन और सुरक्षा को बढ़ावा देने के लिए माइग्रेशन की और भी अधिक आवश्यकता होती है। सर्वर-साइड घटकों की क्षमता, हमारे द्वारा अभी कवर की गई नई सर्वर क्रियाओं के साथ मिलकर, नेक्स्ट.जेएस को सादे रिएक्ट की तुलना में अधिक सुरक्षित और प्रदर्शन करने वाला विकल्प बनाती है। एक रिएक्ट डेवलपर के रूप में, आपको सीखना चाहिए कि अपने ऐप को Next.js पर कैसे माइग्रेट करें।</p> </pre>
</div></code></p></pre>
</div></code></p></span>