00:00:00React सर्वर कंपोनेंट्स। चाहे आप इन्हें पसंद करें या नफरत करें। आजकल तो ज्यादातर नफरत ही दिखती है, लेकिन यह
00:00:04शायद बदलने वाला है क्योंकि TanStack इस खेल में उतर चुका है। जी हां, अब हमारे पास TanStack
00:00:08सर्वर कंपोनेंट्स हैं और उन्होंने Next.js से काफी अलग दृष्टिकोण अपनाया है। आइए देखते हैं।
00:00:13अब, मैं उनकी घोषणा पोस्ट के एक पैराग्राफ से शुरुआत करूँगा जो मुझे लगता है कि बहुत से लोगों को
00:00:21राहत देगा। इसमें लिखा है, "ज्यादातर लोग अब React सर्वर कंपोनेंट्स के बारे में सर्वर-फर्स्ट
00:00:26तरीके से सोचते हैं। सर्वर ट्री का मालिक है, useClient इंटरैक्टिव भागों को चिह्नित करता है, और फ्रेमवर्क कन्वेंशन
00:00:31तय करते हैं कि पूरी चीज़ कैसे एक साथ फिट होती है। यह React सर्वर कंपोनेंट्स को एक उपयोगी
00:00:35प्रिमिटिव से बदलकर एक ऐसी चीज़ बना देता है जिसके इर्द-गिर्द आपका पूरा ऐप घूमता है। हमारा मानना है कि आपको
00:00:40React सर्वर कंपोनेंट्स का लाभ उठाने के लिए शुरुआत से ही उस पूरे मॉडल को अपनाने की आवश्यकता नहीं है।"
00:00:45मूल रूप से वे जो कह रहे हैं वह यह है कि वे Next.js वाले रास्ते पर नहीं जाना चाहते जहाँ यह
00:00:48डिफ़ॉल्ट रूप से सर्वर कंपोनेंट्स होते हैं और फिर जहाँ आपको इंटरैक्टिविटी चाहिए होती है वहां useClient डायरेक्टिव की आवश्यकता होती है।
00:00:52इसके बजाय, TanStack इसे इस तरह सोचना चाहता है कि क्या होगा यदि आप React सर्वर कंपोनेंट्स का उपयोग
00:00:57उतना ही बारीक तरीके से कर सकें जितना आप क्लाइंट पर JSON फ़ेच करते हैं। उस लक्ष्य को ध्यान में रखते हुए, आइए देखते हैं
00:01:01कि उन्होंने वास्तव में सर्वर कंपोनेंट्स को कैसे लागू किया क्योंकि स्पॉइलर अलर्ट: मुझे उनके करने का तरीका वास्तव में पसंद आया।
00:01:06मेरे पास यहाँ एक सामान्य TanStack स्टार्ट एप्लिकेशन है, इसलिए अभी के लिए सब कुछ
00:01:10एक क्लाइंट कंपोनेंट होगा और मैंने केवल कुछ छोटे इंस्टाल स्टेप्स किए हैं जो आपको
00:01:15सर्वर कंपोनेंट्स को चलाने के लिए चाहिए, जो अनिवार्य रूप से कुछ पैकेज इंस्टॉल करना और आपके
00:01:18vconfig को संशोधित करना है। पेज अभी ऐसा दिखता है, हमारे पास यहाँ हमारा ग्रीटिंग कंपोनेंट है जो
00:01:22फिलहाल एक क्लाइंट कंपोनेंट के रूप में दिखना चाहिए और कोड में यह सचमुच सिर्फ एक React कंपोनेंट है
00:01:27फिर यहाँ नीचे हमारे पास एक सामान्य TanStack रूट है और हम यहाँ ग्रीटिंग कंपोनेंट का उपयोग कर रहे हैं। अब मान लीजिए
00:01:32कि अपने ग्रीटिंग कंपोनेंट में आप सर्वर पर कुछ लॉजिक करना चाहते हैं। मेरे मामले में मैं ऑपरेटिंग सिस्टम
00:01:36होस्टनेम और साथ ही कुछ ऐसे एनवायरनमेंट वेरिएबल्स प्राप्त करना चाहता हूँ जो केवल सर्वर के लिए उपलब्ध हैं,
00:01:40बस आपको यह दिखाने के लिए कि यह वास्तव में वहां चल रहा है। फिलहाल अगर मैं os.hostname का उपयोग करने की कोशिश करूँ
00:01:45तो यह काम नहीं करेगा क्योंकि यह एक node फ़ंक्शन है और यह ब्राउज़र में उपलब्ध नहीं है।
00:01:49तो हमें क्या करना होगा, अपने ग्रीटिंग कंपोनेंट को लेना होगा और इसे सर्वर पर रेंडर करना होगा और इसे करने का
00:01:53TanStack स्टार्ट में पहला कदम एक साधारण सर्वर फ़ंक्शन के साथ है। जैसा कि आप देख सकते हैं, मेरे पास
00:01:58यहाँ एक है जिसका नाम get greeting है और हम इसके अंदर जो कर रहे हैं वह नए render server
00:02:01कंपोनेंट फ़ंक्शन का उपयोग करना है, अपने कंपोनेंट को इसके अंदर डालना है और रेंडर होने योग्य सर्वर कंपोनेंट को वापस करना है
00:02:06जो हमें वापस मिलता है। आप इसे इतना सरल मान सकते हैं कि हम अपने कंपोनेंट के लिए एक get रिक्वेस्ट बना रहे हैं।
00:02:10फिर हमें बस इतना करना है कि हमने जो सर्वर फ़ंक्शन बनाया है, उससे कंपोनेंट को फ़ेच करें
00:02:14और हम इसे यहाँ एक रूट पर लोडर के अंदर कर सकते हैं, इसलिए हम बस get greeting का इंतज़ार कर रहे हैं और फिर
00:02:18उसे भी वापस कर रहे हैं और यह अभी भी एक रेंडर होने योग्य सर्वर कंपोनेंट है। फिर हम इसका उपयोग
00:02:23अपने रूट में use loader data का उपयोग करके कर सकते हैं और हम बस यहाँ नीचे कंपोनेंट का उपयोग करते हैं। इसके साथ
00:02:27अब हमारे पास हमारा पहला TanStack सर्वर कंपोनेंट है। आप देख सकते हैं कि os.hostname अब काम कर रहा है और यह
00:02:32उन एनवायरनमेंट वेरिएबल्स को भी खींच रहा है जो केवल सर्वर पर उपलब्ध हैं। अब वह चीज़ जो मुझे
00:02:36इस कार्यान्वयन के बारे में बहुत पसंद है, वह यह है कि यदि आप गौर करें, तो इसमें एकमात्र नई चीज़ render
00:02:41server component फ़ंक्शन है। बाकी सब कुछ सामान्य TanStack स्टार्ट था। आप इसे
00:02:46वापस लौटाए जा रहे कुछ सरल JSON डेटा के साथ बदल सकते हैं और आप इसे ठीक उसी तरह फ़ेच करेंगे। मुझे यह भी लगता है
00:02:51कि यह कार्यान्वयन वास्तव में स्पष्ट है कि आपका कोड वास्तव में कहाँ चल रहा है। आप यह सब
00:02:55एक सर्वर फ़ंक्शन के अंदर करते हैं, इसलिए यह स्पष्ट है कि यह सर्वर पर चलेगा और साथ ही
00:02:59render server component के अंदर भी। वास्तव में मुझे लगता है कि मैं अपने डेमो कोड को बस
00:03:03उन फ़ंक्शंस को लेकर सुधार सकता हूँ जिन्हें मैं यहाँ चला रहा हूँ जिन्हें मैं सर्वर पर चलाना चाहता हूँ, उन्हें
00:03:07सर्वर फ़ंक्शन के अंदर डाल दें और फिर बस उन मानों को props के रूप में अपने ग्रीटिंग कंपोनेंट में पास कर दें, ताकि
00:03:12अब मेरा ग्रीटिंग कंपोनेंट अनिवार्य रूप से सिर्फ एक खाली कंपोनेंट है जिसका उपयोग वास्तव में
00:03:16क्लाइंट या सर्वर पर किया जा सकता है। मैं वह सारा लॉजिक चला रहा हूँ जिसे मैं सर्वर पर चलाना चाहता हूँ, अपने
00:03:21सर्वर फ़ंक्शन के अंदर। फिर से यह काफी स्पष्ट है कि यह सर्वर पर चल रहा होगा। यह
00:03:25शाब्दिक रूप से Next.js में उपयोग किए गए लॉजिक का बिल्कुल विपरीत महसूस होता है और मुझे यह बहुत पसंद है।
00:03:30इसका मतलब है कि मैं React के बारे में सामान्य तरीके से सोच सकता हूँ, यह सब क्लाइंट-फर्स्ट है, फिर जब मैं चाहता हूँ तब सर्वर कंपोनेंट्स
00:03:34ऊपर जोड़ सकता हूँ। लेकिन क्या होगा अगर मैं अपने सर्वर
00:03:38कंपोनेंट के अंदर एक क्लाइंट कंपोनेंट का उपयोग करना चाहूँ, यानी ट्री के भीतर नेस्टेड? मान लीजिए कि मैं यहाँ एक काउंटर बटन जोड़ना चाहूँ जो हर बार
00:03:43इसे क्लिक करने पर काउंटर में जोड़ दे। खैर, अगर मैं इसे अपने सर्वर कंपोनेंट में एक
00:03:47ऑन क्लिक और फिर एक use state कॉल के साथ जोड़ने की कोशिश करूँ, तो आप देख सकते हैं कि यह पूरी तरह से टूट जाता है। यह कहता है कि use state
00:03:52एक फ़ंक्शन नहीं है या इसका रिटर्न मान इटेरेबल नहीं है और ऐसा इसलिए है क्योंकि ग्रीटिंग का उपयोग सर्वर
00:03:56कंपोनेंट के रूप में किया जा रहा है। हम इस क्लाइंट कार्यक्षमता का उपयोग नहीं कर सकते। इसे ठीक करने के लिए आपके पास दो विकल्प हैं और दूसरा
00:04:01विकल्प निश्चित रूप से उपयोग करने के लिए सबसे अच्छा है, लेकिन पहला विकल्प उन लोगों के लिए जाना-पहचाना लगेगा
00:04:05जिन्होंने Next.js का उपयोग किया है। हम बस उस लॉजिक को अपने स्वयं के कंपोनेंट में ले जा सकते हैं और फिर
00:04:10use client डायरेक्टिव का उपयोग कर सकते हैं। यह TanStack स्टार्ट सर्वर कंपोनेंट्स में काम करता है, हम बस
00:04:14सर्वर कंपोनेंट के अंदर कंपोनेंट का उपयोग कर सकते हैं और जैसा कि आप देख सकते हैं, यह सब अच्छी तरह से काम कर रहा है। इस दृष्टिकोण का नुकसान
00:04:18हालांकि यह है कि अब हमारे पास एक सर्वर कंपोनेंट है जो एक
00:04:22क्लाइंट कंपोनेंट की रेंडरिंग को नियंत्रित कर रहा है और यह थोड़ा गड़बड़ होने लग सकता है, यानी अगर मैं यह पता लगाना चाहूँ कि मेरा
00:04:28काउंटर कंपोनेंट ट्री में कहाँ था, तो मैं अपने रूट पर जाऊँगा और देखूँगा कि हमारे पास एक ग्रीटिंग सर्वर
00:04:32कंपोनेंट है, फिर वापस ग्रीटिंग सर्वर कंपोनेंट में जाऊँगा और सर्वर कंपोनेंट के अंदर देखूँगा
00:04:37कि हमारे पास एक क्लाइंट कंपोनेंट है और यह गंदगी वास्तव में जमा होने लग सकती है और सर्वर और क्लाइंट की उस सीमा
00:04:42को थोड़ा अस्पष्ट बना सकती है। हालाँकि TanStack इसके लिए समझौता नहीं करेगा। उन्होंने
00:04:47खुद से पूछा कि क्या होगा अगर सर्वर को UI के हर क्लाइंट-आकार के हिस्से को बिल्कुल भी तय न करना पड़े
00:04:51और इसने उन्हें कुछ पूरी तरह से नया बनाने के लिए प्रेरित किया - कंपोजिट कंपोनेंट्स। उपयोग करने के लिए, पहली
00:04:56चीज़ जो मैं करूँगा वह है अपने सर्वर कंपोनेंट से अपने क्लाइंट कंपोनेंट को हटाना और मैं इसे बस
00:05:00अपने ग्रीटिंग कंपोनेंट के किसी भी बच्चों (चिल्ड्रन) से बदल दूँगा। अगला, हमें यह भी बदलना होगा कि हम अपने
00:05:05सर्वर फ़ंक्शन से क्या वापस कर रहे हैं। रेंडर होने योग्य सर्वर कंपोनेंट वापस करने के बजाय, हमें वापस करना होगा
00:05:09जिसे कंपोजिट सोर्स कहा जाता है। ऐसा करने के लिए, हम अपने दूसरे TanStack सर्वर कंपोनेंट हेल्पर
00:05:14फ़ंक्शन का उपयोग कर सकते हैं - create composite component। यहाँ हम अनिवार्य रूप से बस एक कंपोनेंट बना रहे हैं
00:05:18जहाँ props को यहाँ स्लॉट माना जाता है। मैं बस एक बहुत ही सरल चिल्ड्रन स्लॉट का उपयोग कर रहा हूँ, इसलिए यह
00:05:22मेरे कंपोजिट कंपोनेंट के बच्चे के रूप में जो कुछ भी हम डालते हैं, उसे इस props.children में पास कर देगा, जिसे
00:05:27मैं उस ग्रीटिंग कंपोनेंट में पास कर रहा हूँ जो हमारे पास अभी था। इसके साथ फिर से हमें क्या करना है,
00:05:31अपने सर्वर फ़ंक्शन से अपने कंपोजिट कंपोनेंट को फ़ेच करना है और हम इसे बिल्कुल उसी तरह करते हैं, जिस तरह से
00:05:36लोडर में यहाँ। आप देख सकते हैं कि मैं बस source को greeting के रूप में नाम बदल रहा हूँ, फिर मैं उसे use loader
00:05:41data के साथ लोड कर रहा हूँ। हालाँकि यहाँ एकमात्र अंतर यह है कि हम इसे एक कंपोनेंट के रूप में उपयोग नहीं कर सकते। आप देख सकते हैं कि यह यहाँ एक
00:05:45त्रुटि फेंक रहा है। एक कंपोजिट कंपोनेंट को वास्तव में रेंडर करने के लिए हमें कंपोजिट कंपोनेंट हेल्पर
00:05:49कंपोनेंट का उपयोग करने की आवश्यकता है जो हमें TanStack सर्वर कंपोनेंट्स से मिलता है और source प्रॉप के रूप में हम पास करते हैं
00:05:53उस कंपोजिट कंपोनेंट के माध्यम से जिसे हम अपने सर्वर फ़ंक्शन से फ़ेच करते हैं जिसे हमने पहले बनाया था।
00:05:57इसके साथ, मेरा सर्वर कंपोनेंट वैसे ही रेंडर हो रहा है जैसा हमारे पास पहले था और मैं काउंटर को भी पास कर रहा हूँ
00:06:01इस कंपोजिट कंपोनेंट के बच्चों के रूप में और वह ग्रीटिंग में पास हो रहा है जहाँ हमने
00:06:05इसे सेट किया था, इसलिए यह इसे props.children में पास कर रहा है, इसलिए सब कुछ अब
00:06:10अच्छी तरह से काम कर रहा है। मैं अपने काउंटर कंपोनेंट में भी जा सकता हूँ और उस डायरेक्टिव को हटा सकता हूँ जो हमारे पास यहाँ था क्योंकि इसकी
00:06:14अब आवश्यकता नहीं है क्योंकि यह जानता है कि यह एक क्लाइंट कंपोनेंट होने वाला है क्योंकि यह एक कंपोजिट
00:06:18कंपोनेंट के अंदर है। इसका उपयोग एक स्लॉट के रूप में किया जा रहा है। अब ऐसा लग सकता है कि हमें वहाँ बिल्कुल वही परिणाम मिला
00:06:23लेकिन use client डायरेक्टिव का उपयोग करने की तुलना में अधिक काम के साथ, लेकिन शक्ति वास्तव में डेवलपर अनुभव से आ रही है
00:06:27और यह use client मॉडल से थोड़ा बदलाव है। हमारे पास यह निर्णय लेने के लिए कि हमारे क्लाइंट कंपोनेंट्स कहाँ रेंडर होते हैं, सर्वर के बजाय,
00:06:32जैसे जब हमारे पास सर्वर कंपोनेंट के अंदर काउंटर कंपोनेंट था, तो इसके बजाय हम कंपोजिट कंपोनेंट्स के साथ जो कर रहे हैं
00:06:36वह यह कहना है कि यहाँ एक स्लॉट होगा, हम एक क्लाइंट कंपोनेंट रेंडर करने जा रहे हैं, लेकिन सर्वर
00:06:40कंपोनेंट को खुद कोई अंदाज़ा नहीं है कि वह क्या होने वाला है। हम इसे बाद में अपने क्लाइंट कोड में जोड़ते हैं
00:06:44इसलिए हम सभी क्लाइंट-आधारित कंपोनेंट्स को क्लाइंट कोड के भीतर ही संभालते हैं। यह सिर्फ शुरुआत है
00:06:48यदि हम इस पोस्ट वाले जैसे अधिक जटिल पेज पर एक नज़र डालें, जहाँ यह पोस्ट सर्वर रेंडर किया जा रहा है,
00:06:53तो दो मुद्दे हैं जिन्हें मैं हल करना चाहता हूँ। पहला यह है कि मैं कुछ क्रियाएं जोड़ना चाहता हूँ जैसे
00:06:58पोस्ट को लाइक करना और लेखक को फॉलो करना, लेकिन मैं उन्हें यहाँ शीर्षक के ऊपर जोड़ना चाहता हूँ और मैं
00:07:03एक क्लाइंट कंपोनेंट का उपयोग करना चाहता हूँ। फिलहाल मैं बस इस चिल्ड्रन स्लॉट पैटर्न का उपयोग कर रहा हूँ, जिसका मतलब है कि अगर मैं
00:07:08अपनी पोस्ट क्रियाओं को यहाँ नीचे जोड़ता हूँ तो यह वहीं जाएगा जहाँ टिप्पणियाँ हैं क्योंकि हमारे पास
00:07:12कंपोनेंट इस तरह सेट है, इसलिए मैं अपने सर्वर कंपोनेंट को यह बताने के लिए कोई तरीका चाहता हूँ कि विशिष्ट क्लाइंट
00:07:17कंपोनेंट्स को कहाँ रखा जाए। फिर हमारे पास एक दूसरा मुद्दा है कि यदि मेरे पास लेखक को फॉलो करने वाला बटन हो। फिलहाल इस
00:07:22पोस्ट पेज को वास्तव में कोई अंदाज़ा नहीं है कि पोस्ट का लेखक कौन है। हमने वास्तव में उस सारे लॉजिक को
00:07:27सर्वर कंपोनेंट में ही ऑफलोड कर दिया है। अगर मैं यहाँ नीचे एक क्लाइंट कंपोनेंट में लेखक को प्राप्त करना चाहूँ, तो मुझे
00:07:32वास्तव में पोस्ट के लिए JSON फ़ेच करना होगा और उस तरह से लेखक को प्राप्त करना होगा और यह वास्तव में अच्छा
00:07:37पैटर्न नहीं है, हम डेटा को डबल फ़ेच कर रहे होंगे। हमारे लिए सौभाग्य की बात है कि TanStack के पास वास्तव में दो अन्य स्लॉट प्रकार हैं
00:07:42जिनका उपयोग हम इस चिल्ड्रन वाले के अलावा कंपोजिट कंपोनेंट पर कर सकते हैं और पहला होने वाला है
00:07:46रेंडर प्रॉप्स। यह अनिवार्य रूप से कोई भी प्रॉप है जो एक फ़ंक्शन है जो एक React एलिमेंट वापस करता है, इसलिए
00:07:50इसे कुछ भी कहा जा सकता है, इसे render actions कहने की आवश्यकता नहीं है और यहाँ मैं बस कह रहा हूँ कि
00:07:56मैं सर्वर कंपोनेंट को क्या डेटा पास करना चाहता हूँ और वह पोस्ट ID और लेखक ID होगा।
00:07:59अब हमें अपने कंपोजिट कंपोनेंट में बस इस फ़ंक्शन का उपयोग करना है जिसे हम
00:08:04प्रॉप के रूप में पास कर रहे हैं, जहाँ भी आप उस कंपोनेंट को चाहते हैं जो अंततः रेंडर होने वाला है।
00:08:08मेरे मामले में मैं चाहता हूँ कि वह कार्ड हेडर के नीचे हो, इसलिए मैं इसे props dot render
00:08:12actions के साथ कॉल कर सकता हूँ, हम एक वैकल्पिक उपयोग कर सकते हैं, इसलिए यदि इसे पास नहीं किया जाता है तो यह टूटता नहीं है, यह बस
00:08:16रेंडर नहीं होगा, फिर हम उस जानकारी को भी पास कर सकते हैं जो हम सर्वर कंपोनेंट से
00:08:20अपने क्लाइंट कंपोनेंट में चाहते हैं। इसके बाद हमारा कंपोजिट कंपोनेंट रेंडर एक्शन्स
00:08:24प्रॉप को स्वीकार करेगा जिसे हमने अभी बनाया है और मान के लिए हम बस एक फ़ंक्शन पास करते हैं जिसमें एक पोस्ट
00:08:28ID और लेखक ID तर्क के रूप में है जिसे सर्वर भर देगा, फिर हम बस अपने
00:08:32पोस्ट एक्शन्स क्लाइंट कंपोनेंट को रेंडर करते हैं और हम उस डेटा को props के रूप में पास कर सकते हैं। इसलिए अब मेरे पास यहाँ एक बटन है
00:08:36जहाँ मैं लाइक कर सकता हूँ और पोस्ट का लिंक कॉपी कर सकता हूँ और यहाँ फॉलो ऑथर पर भी क्लिक कर सकता हूँ जहाँ
00:08:41यह लेखक के नाम से अवगत है, इस तथ्य के बावजूद कि मैंने वास्तव में इस पेज पर कभी इसे फ़ेच नहीं किया है।
00:08:45मैं इसे केवल सर्वर कंपोनेंट में फ़ेच करता हूँ और सर्वर कंपोनेंट उस डेटा को
00:08:49मेरे लिए क्लाइंट कंपोनेंट में पास कर रहा है। अब आप सोच सकते हैं कि यह उस लॉजिक को तोड़ता है जो हमारे पास पहले था जहाँ हमने कहा था
00:08:53कि हम नहीं चाहते कि कोई भी सर्वर कंपोनेंट क्लाइंट वाले को रेंडर करने का प्रभार ले, लेकिन ऐसा नहीं होता है और इसका कारण
00:08:57यह है कि स्लॉट वास्तव में अपारदर्शी (opaque) होते हैं। यहाँ सर्वर कंपोनेंट को कोई अंदाज़ा नहीं है कि इसके अंदर क्या है,
00:09:01यह सिर्फ जानता है कि यहाँ कुछ आता है और जिसे इन मानों को पास करने की आवश्यकता है जो
00:09:06इस मामले में पोस्ट ID और लेखक ID है। यह फ़ंक्शन सर्वर पर नहीं चलता है, इसके बजाय
00:09:10सर्वर बस देखता है कि उसे डेटा पास करने की आवश्यकता है और फिर हमारे क्लाइंट में यह तब होता है
00:09:15जब फ़ंक्शन वास्तव में चलता है और कंपोनेंट रेंडर किया जाता है। बिल्कुल वही चीज़ हमारे
00:09:19तीसरे स्लॉट प्रकार पर भी लागू होती है, जो कि कंपोनेंट प्रॉप्स है, यह वास्तव में
00:09:23रेंडर प्रॉप्स की तुलना में थोड़ा अधिक सरल है, हम बस एक फ़ंक्शन होने के बजाय जो फिर हमारा क्लाइंट कंपोनेंट वापस करता है,
00:09:28हम सिर्फ क्लाइंट कंपोनेंट को प्रॉप के रूप में पास कर रहे हैं, फिर अपने कंपोजिट कंपोनेंट
00:09:33परिभाषा पर यहाँ हम कह रहे हैं कि हम एक प्रॉप स्वीकार करना चाहते हैं जो एक React कंपोनेंट है जिसमें
00:09:38पोस्ट ID और लेखक ID के प्रॉप्स हैं, फिर हम कंपोनेंट के भीतर इसका उपयोग कर सकते हैं। आप
00:09:42कंपोनेंट प्रॉप्स को एक प्लेसहोल्डर की तरह सोच सकते हैं, सर्वर कंपोनेंट जानता है कि वहाँ एक कंपोनेंट
00:09:47होने वाला है जिसे कुछ डेटा की आवश्यकता है, हमारे मामले में पोस्ट ID और लेखक ID, लेकिन वास्तव में परवाह नहीं है कि वह
00:09:51कंपोनेंट क्या है, जब तक कि वह उन प्रॉप्स को स्वीकार करता है, इसलिए मैंने अपने पोस्ट एक्शन्स कंपोनेंट को यहाँ नीचे बदल दिया
00:09:56एक और में जिसे मैंने बनाया है, जिसे फेक पोस्ट एक्शन्स कहते हैं और फिर हम उसे सेव करते हैं, आप देख सकते हैं कि यह
00:10:01अभी भी रेंडर होने वाला है क्योंकि यह क्लाइंट है जो इस कंपोनेंट को रेंडर करने के लिए जिम्मेदार है
00:10:05यह केवल सर्वर है जो डेटा प्रदान करता है। दस्तावेज़ों को देखने पर, ऐसा नहीं लगता है कि
00:10:10कोई वास्तविक अंतर है कि आप किस दृष्टिकोण को अपनाते हैं, चाहे आप कंपोनेंट प्रॉप्स के साथ जाएं या रेंडर प्रॉप्स के साथ,
00:10:14यह सिर्फ पसंद का मामला हो सकता है। एकमात्र अंतर जो मैं देख सकता हूँ वह यह है कि शायद आप
00:10:18डेटा को संशोधित करना चाहते हैं जो आपको सर्वर से मिलता है, इसलिए इस मामले में हम पोस्ट ID और लेखक ID के साथ जो चाहें कर सकते हैं
00:10:22क्योंकि यह सिर्फ एक फ़ंक्शन है और फिर हम उसे अपने कंपोनेंट पर पास कर सकते हैं
00:10:26जबकि यदि आप कंपोनेंट प्रॉप्स का उपयोग कर रहे हैं, तो आप बस कंपोनेंट को पास करते हैं और सर्वर
00:10:31प्रॉप्स को पास करना संभालता है। अब TanStack सर्वर कंपोनेंट्स की ये बुनियादी बातें हैं, लेकिन इसमें
00:10:36पसंद करने के लिए और भी बहुत कुछ है। उदाहरण के लिए, यदि आप चाहते हैं कि आपका अधिकांश पेज सर्वर रेंडर हो,
00:10:40शायद आपके पास एक हेडर कंपोनेंट, कंटेंट कंपोनेंट और एक फ़ूटर वाला कंपोनेंट हो और आप उन सभी को सर्वर
00:10:44रेंडर चाहते हैं, तो आपको उन्हें एक render server component फ़ंक्शन में बंडल करने की आवश्यकता नहीं है, आप वास्तव में
00:10:49promise.all का उपयोग कर सकते हैं, उन्हें तीन अलग-अलग फ़ंक्शंस में विभाजित कर सकते हैं और फिर उन्हें एक ऑब्जेक्ट के रूप में वापस कर सकते हैं
00:10:53एक ही सर्वर फ़ंक्शन से। लेकिन क्या होगा अगर उनमें से कोई एक कंपोनेंट लोड होने में लंबा समय ले? इसका
00:10:58मतलब होगा कि पूरा सर्वर फ़ंक्शन और इसलिए पूरा पेज लोड होगा। खैर, यहाँ भी चिंता न करें
00:11:03हम वास्तव में क्या कर सकते हैं, render server component फ़ंक्शन की प्रतीक्षा करने (awaiting) के बजाय, हम वास्तव में
00:11:07उस प्रॉमिस को वापस कर सकते हैं जो यह बनाता है और फिर क्लाइंट पर हम use हुक और
00:11:12सस्पेंस बाउंड्रीज़ का लाभ उठा सकते हैं ताकि कंकाल (skeletons) लोड हो सकें, इसलिए सर्वर कंपोनेंट्स बस तब लोड होंगे जब वे तैयार होंगे।
00:11:16मुझे वास्तव में वह दृष्टिकोण पसंद है जो TanStack ने यहाँ अपनाया है। यह दखल देने वाला महसूस नहीं होता है, मैं इसे अपनाने के लिए
00:11:21मजबूर नहीं हूँ और मैं इसे बिना किसी अजीब समाधान के अपना सकता हूँ। इसके अलावा जब मैं वास्तव में इसका उपयोग करने जाता हूँ
00:11:25तो सर्वर कंपोनेंट्स खुद वास्तव में केवल तीन नए फ़ंक्शंस हैं, बाकी सब कुछ सरल
00:11:31TanStack स्टार्ट सर्वर फ़ंक्शंस है, जिसका उपयोग मैं पहले से ही कर रहा था और यह डेटा फ़ेच करने जितना सरल है।
00:11:36इसका मतलब यह भी है कि यह TanStack क्वेरी जैसे टूल्स के साथ अच्छी तरह से एकीकृत होता है, ऐसा कुछ जो मैं
00:11:41निश्चित रूप से करूँगा और यह कैशिंग जैसी चीज़ों को भी सरल बनाता है। यदि आप चाहें, तो आप सचमुच
00:11:45अपने CDN पर get रिक्वेस्ट के रिस्पॉन्स को कैश कर सकते हैं। मैं निश्चित रूप से इन्हें और अधिक एक्सप्लोर करने जा रहा हूँ,
00:11:49तो मुझे नीचे कमेंट्स में बताएं कि आप इनके बारे में क्या सोचते हैं और क्या आप उन पर और वीडियो देखना चाहेंगे।
00:11:54खैर हाँ, सब्सक्राइब करें और हमेशा की तरह, अगले वीडियो में मिलते हैं।