React 19 और Next.js में सर्वर ऐक्शन

Server Actions ऐसी अतुल्यकालिक क्रियाएँ हैं जो ब्राउज़र में नहीं, बल्कि सर्वर पर चलती हैं। इन्हें 'use server' निर्देश द्वारा चिह्नित किया जाता है, जिसे फ़ाइल के शीर्ष पर या फ़ंक्शन के मुख्य भाग की शुरुआत में रखा जाता है। इससे फ़्रेमवर्क को संकेत मिलता है कि यह फ़ंक्शन क्लाइंट-पक्ष पर कभी नहीं चलना चाहिए।

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

जब कोई क्लाइंट घटक सर्वर ऐक्शन को कॉल करता है, तो Next.js स्वचालित रूप से एक विशेष RSC एंडपॉइंट पर HTTP POST अनुरोध भेजता है। फ़्रेमवर्क तर्कों के पूरे क्रमबद्धीकरण और परिवहन परत को संभालता है, इसलिए इन डेटा परिवर्तनों के लिए आपको कभी भी स्वयं डेटा-प्राप्ति कॉल लिखने की आवश्यकता नहीं पड़ती।

कई डेटा-परिवर्तन वाले मामलों में सर्वर ऐक्शन एपीआई मार्गों की आवश्यकता को समाप्त कर देते हैं। ऐक्शन स्वयं एंडपॉइंट होता है — आप तर्क को एक बार सर्वर फ़ंक्शन के रूप में परिभाषित करते हैं और उसे क्लाइंट घटक से ऐसे सीधे कॉल करते हैं, जैसे वह कोई स्थानीय फ़ंक्शन हो।

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

रिएक्ट 19 RC में सर्वर ऐक्शन प्रयोगात्मक हैं, लेकिन उनके शुरू होने के बाद से Next.js 14+ ऐप राउटर में स्थिर रहे हैं। यदि आप आज Next.js ऐप राउटर के साथ कोई उत्पादन अनुप्रयोग बना रहे हैं, तो सर्वर ऐक्शन पूरी तरह समर्थित और अनुशंसित तरीका हैं।

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

HTML फ़ॉर्म तत्व action एट्रिब्यूट के माध्यम से सीधे सर्वर ऐक्शन स्वीकार करते हैं: <form action={myServerAction}>। रिएक्ट फ़ॉर्म सबमिशन को रोककर फ़ॉर्म डेटा के साथ सर्वर ऐक्शन को कॉल करता है, जिससे क्लाइंट-पक्ष के किसी अतिरिक्त JavaScript ढाँचे के बिना सर्वर-पक्षीय डेटा परिवर्तन संभव होता है।

जब कोई सर्वर ऐक्शन ट्रिगर होता है, तो रिएक्ट ऐक्शन के तर्कों को POST अनुरोध के मुख्य भाग में क्रमबद्ध करता है। सर्वर उन्हें क्रमबद्ध रूप से वापस बदलता है, फ़ंक्शन चलाता है, लौटाए गए मान को क्रमबद्ध करता है और उसे वापस भेजता है। केवल वे मान ही इस सीमा को पार कर सकते हैं जिन्हें क्रमबद्ध किया जा सकता है, जैसे पाठ-स्ट्रिंग, संख्याएँ, सारणियाँ और साधारण ऑब्जेक्ट।

आप किसी फ़ाइल में सबसे ऊपर 'use server' लिखकर मॉड्यूल स्तर पर सर्वर ऐक्शन परिभाषित कर सकते हैं, या किसी सर्वर घटक के अंदर असिंक्रोनस फ़ंक्शन के सबसे ऊपर 'use server' लिखकर उसे वहीं परिभाषित कर सकते हैं। दोनों तरीकों का परिणाम समान होता है: केवल सर्वर पर कॉल किया जा सकने वाला फ़ंक्शन।

क्लाइंट घटक सर्वर ऐक्शन को सामान्य असिंक्रोनस फ़ंक्शन की तरह आयात करके कॉल करते हैं। कॉल करने का वाक्य-विन्यास स्थानीय असिंक्रोनस फ़ंक्शन कॉल जैसा ही होता है, लेकिन निष्पादन पूरी तरह सर्वर पर होता है। यह अमूर्तीकरण क्लाइंट घटकों को साफ़-सुथरा रखता है और डेटा-प्राप्ति के अतिरिक्त प्रारंभिक कोड से मुक्त रखता है।

सर्वर ऐक्शन 'use server' से चिह्नित असिंक्रोनस सर्वर-पक्षीय फ़ंक्शन होते हैं। वे डेटाबेस कनेक्शन और पर्यावरणीय गोपनीय जानकारी जैसे सर्वर संदर्भ को अपने साथ बनाए रखते हैं। Next.js एचटीटीपी परिवहन को स्वचालित रूप से संभालता है और रिएक्ट 19 उन्हें फ़्रेमवर्क-स्वतंत्र सुविधा बना देता है। फ़ॉर्म उनका उपयोग सीधे action एट्रिब्यूट के माध्यम से कर सकते हैं और उनके अंदर की गोपनीय जानकारी कभी ब्राउज़र तक नहीं पहुँचती।