00:00:00(उत्साहपूर्ण संगीत) - ठीक है, सभी को नमस्कार।
00:00:06मेरा नाम ऑरोरा है।
00:00:07मैं नॉर्वे से एक वेब डेवलपर हूँ।
00:00:09मैं क्रेन कंसल्टिंग में एक सलाहकार के रूप में काम करती हूँ,
00:00:12और अपने मौजूदा कंसल्टेंसी प्रोजेक्ट में Next.js ऐप राउटर के साथ सक्रिय रूप से काम कर रही हूँ।
00:00:16आज,
00:00:17मैं आपको आधुनिक Next.js में कंपोजिशन,
00:00:18कैशिंग और आर्किटेक्चर से संबंधित पैटर्न सिखाने जा रही हूँ जो आपको स्केलेबिलिटी और परफॉर्मेंस सुनिश्चित करने में मदद करेंगे।
00:00:24इस चर्चा के लिए,
00:00:25मैं पहले सबसे मूलभूत अवधारणा,
00:00:27स्थिर और गतिशील रेंडरिंग को ताज़ा कर दूँ।
00:00:30हम Next.js ऐप राउटर में इन दोनों का सामना करते हैं।
00:00:33स्थिर रेंडरिंग हमें तेज़ी से वेबसाइट बनाने की अनुमति देता है क्योंकि प्री-रेंडर की गई सामग्री को कैश किया जा सकता है और विश्व स्तर पर वितरित किया जा सकता है,
00:00:39यह सुनिश्चित करते हुए कि उपयोगकर्ता इसे तेज़ी से एक्सेस कर सकें।
00:00:42उदाहरण के लिए, Next.js कॉन्फ़ वेबसाइट।
00:00:46स्थिर रेंडरिंग सर्वर लोड को कम करता है क्योंकि प्रत्येक उपयोगकर्ता अनुरोध के लिए सामग्री उत्पन्न करने की आवश्यकता नहीं होती है।
00:00:51प्री-रेंडर की गई सामग्री को सर्च इंजन क्रॉलर के लिए इंडेक्स करना भी आसान होता है क्योंकि सामग्री पेज लोड पर पहले से ही उपलब्ध होती है।
00:00:58दूसरी ओर,
00:00:59गतिशील रेंडरिंग,
00:00:59हमारे एप्लिकेशन को वास्तविक समय या अक्सर अपडेट किए गए डेटा को प्रदर्शित करने की अनुमति देता है।
00:01:05यह हमें व्यक्तिगत सामग्री प्रदान करने में भी सक्षम बनाता है,
00:01:07जैसे डैशबोर्ड और उपयोगकर्ता प्रोफाइल।
00:01:09उदाहरण के लिए, वर्सेल डैशबोर्ड।
00:01:12गतिशील रेंडरिंग के साथ,
00:01:13हम उस जानकारी तक पहुँच सकते हैं जो केवल अनुरोध के समय ही ज्ञात हो सकती है।
00:01:16इस मामले में,
00:01:17कौन सा उपयोगकर्ता अपने डैशबोर्ड तक पहुँच रहा है,
00:01:19जो मैं हूँ।
00:01:20कुछ ऐसे API हैं जो किसी पेज को गतिशील रूप से रेंडर कर सकते हैं।
00:01:25पेजों को पास किए गए params और search params props या उनके समतुल्य हुक का उपयोग गतिशील रेंडरिंग का कारण बनेगा।
00:01:32हालांकि,
00:01:32params के साथ,
00:01:33हम जेनेरिक स्टैटिक params का उपयोग करके प्री-रेंडर किए गए पेजों का एक सेट पूर्वनिर्धारित कर सकते हैं,
00:01:37और हम उन पेजों को भी कैश कर सकते हैं जैसे वे उपयोगकर्ताओं द्वारा उत्पन्न किए जा रहे हैं।
00:01:40इसके अलावा,
00:01:41आने वाले अनुरोध कुकीज़ और हेडर को पढ़ना पेज को गतिशील रेंडरिंग में शामिल करेगा।
00:01:46हालांकि,
00:01:47params के विपरीत,
00:01:47हेडर या कुकीज़ का उपयोग करके कुछ भी कैश या प्री-रेंडर करने का प्रयास करना बिल्ड के दौरान त्रुटियाँ उत्पन्न करेगा क्योंकि वह जानकारी पहले से ज्ञात नहीं हो सकती।
00:01:56अंत में,
00:01:56डेटा कैश कॉन्फ़िगरेशन 'नो स्टोर' के साथ 'फ़ेच' का उपयोग करना भी गतिशील रेंडरिंग को बाध्य करेगा।
00:02:00तो ये कुछ हैं,
00:02:01कुछ और API हैं जो गतिशील रेंडरिंग का कारण बन सकते हैं,
00:02:04लेकिन ये वे हैं जिनसे हम सबसे अधिक बार सामना करते हैं।
00:02:06Next के पिछले संस्करणों में,
00:02:08एक पेज या तो पूरी तरह से स्थिर या पूरी तरह से गतिशील के रूप में रेंडर किया जाता था।
00:02:13एक पेज पर एक भी गतिशील API पूरे पेज को गतिशील रेंडरिंग में शामिल करेगा।
00:02:17उदाहरण के लिए,
00:02:18एक कुकी के मान के लिए एक साधारण प्रमाणीकरण जांच करना।
00:02:20सस्पेंस के साथ रिएक्ट सर्वर कंपोनेंट्स का उपयोग करके,
00:02:23हम व्यक्तिगत स्वागत बैनर या सिफारिशों जैसे गतिशील सामग्री को स्ट्रीम कर सकते हैं जैसे ही वे तैयार होते हैं और न्यूज़लेटर जैसी स्थिर सामग्री दिखाते हुए सस्पेंस के साथ केवल फॉलबैक प्रदान कर सकते हैं।
00:02:34हालांकि,
00:02:34एक बार जब हम एक गतिशील पेज पर कई एसिंक कंपोनेंट्स जोड़ते हैं,
00:02:38जैसे कि एक फीचर प्रोडक्ट,
00:02:40तो वे भी अनुरोध के समय चलेंगे,
00:02:42भले ही वे गतिशील API पर निर्भर न हों।
00:02:45तो प्रारंभिक पेज लोड को ब्लॉक करने से बचने के लिए,
00:02:47हम उन कंपोनेंट्स को भी सस्पेंड और स्ट्रीम करेंगे,
00:02:50अतिरिक्त काम करते हुए,
00:02:51स्केलेटन बनाते हुए और ह्यूमन-टू-लेआउट शिफ्ट जैसी चीजों के बारे में चिंता करते हुए।
00:02:56हालांकि,
00:02:57पेज अक्सर स्थिर और गतिशील सामग्री का मिश्रण होते हैं।
00:03:01उदाहरण के लिए,
00:03:02एक ई-कॉमर्स ऐप जो उपयोगकर्ता जानकारी पर निर्भर करता है जबकि इसमें अभी भी अधिकतर स्थिर डेटा होता है।
00:03:07स्थिर या गतिशील के बीच,
00:03:08उनमें से चुनने के लिए मजबूर होना,
00:03:10सर्वर पर ऐसी सामग्री पर बहुत अधिक अनावश्यक प्रोसेसिंग का कारण बनता है जो कभी नहीं या बहुत कम बदलती है और परफॉर्मेंस के लिए इष्टतम नहीं है।
00:03:19तो इस समस्या को हल करने के लिए,
00:03:21पिछले साल की Next.js कॉन्फ़ में,
00:03:23use cache डायरेक्टिव की घोषणा की गई थी।
00:03:26और इस साल,
00:03:26जैसा कि हमने कीनोट में देखा,
00:03:28यह Next.js 16 में उपलब्ध है।
00:03:30तो use cache के साथ,
00:03:31पेजों को अब स्थिर या गतिशील रेंडरिंग में मजबूर नहीं किया जाएगा।
00:03:36वे दोनों हो सकते हैं।
00:03:37और Next.js को अब यह अनुमान लगाने की आवश्यकता नहीं है कि कोई पेज क्या है,
00:03:40इस आधार पर कि क्या वह params जैसी चीजों तक पहुँचता है।
00:03:43सब कुछ डिफ़ॉल्ट रूप से गतिशील है और use cache हमें स्पष्ट रूप से कैशिंग में शामिल होने देता है।
00:03:47Use cache कंपोजेबल कैशिंग को सक्षम बनाता है।
00:03:51हम किसी पेज,
00:03:52रिएक्ट कंपोनेंट या फ़ंक्शन को कैश करने योग्य के रूप में चिह्नित कर सकते हैं।
00:03:55यहां,
00:03:56हम वास्तव में फीचर प्रोडक्ट्स कंपोनेंट को कैश कर सकते हैं क्योंकि इसे अनुरोध और प्रोसेसिंग की आवश्यकता नहीं है और यह गतिशील API का उपयोग नहीं करता है।
00:04:03और इन कैश सेगमेंट को आंशिक प्री-रेंडरिंग के साथ स्टैटिक शेल के हिस्से के रूप में प्री-रेंडर और शामिल किया जा सकता है,
00:04:09जिसका अर्थ है कि फीचर प्रोडक्ट्स अब पेज लोड पर उपलब्ध है और इसे स्ट्रीम करने की आवश्यकता नहीं है।
00:04:14तो अब जब हमारे पास यह महत्वपूर्ण पृष्ठभूमि ज्ञान है,
00:04:18चलिए एक डेमो करते हैं।
00:04:19Next.js ऐप्स में अक्सर आने वाली सामान्य समस्याओं वाले कोडबेस में सुधार।
00:04:24इनमें डीप प्रॉप ड्रिलिंग शामिल है,
00:04:25जिससे सुविधाओं को बनाए रखना और रिफैक्टर करना मुश्किल हो जाता है,
00:04:28अनावश्यक क्लाइंट-साइड जावास्क्रिप्ट और कई जिम्मेदारियों वाले बड़े कंपोनेंट्स,
00:04:32और स्थिर रेंडरिंग की कमी,
00:04:33जिससे अतिरिक्त सर्वर लागत और खराब परफॉर्मेंस होती है।
00:04:36तो हाँ, चलिए शुरू करते हैं।
00:04:37और मुझे यहाँ एक सेकंड दें।
00:04:50ठीक है, बढ़िया।
00:04:54तो यह एक बहुत ही सरल एप्लिकेशन है।
00:04:56यह एक ई-कॉमर्स प्लेटफॉर्म से प्रेरित है।
00:04:59और मुझे यहाँ एक प्रारंभिक डेमो करने दें।
00:05:01तो मैं इस पेज को लोड कर सकता हूँ।
00:05:03मेरे पास इस फीचर प्रोडक्ट जैसी कुछ सामग्री है।
00:05:06मेरे पास फीचर श्रेणियाँ, विभिन्न उत्पाद डेटा हैं।
00:05:09यहाँ यह 'ब्राउज़ ऑल' पेज भी है जहाँ मैं प्लेटफॉर्म में सभी उत्पादों को देख सकता हूँ और उनके बीच पेज कर सकता हूँ।
00:05:20फिर यहाँ यह 'अबाउट' पेज है, जो केवल स्थिर है।
00:05:24मैं एक उपयोगकर्ता के रूप में भी साइन इन कर सकता हूँ।
00:05:27और वह मुझे मेरे उपयोगकर्ता में लॉग इन करेगा।
00:05:30और फिर यहाँ मेरे डैशबोर्ड पर व्यक्तिगत सामग्री भी प्राप्त करूँगा।
00:05:33जैसे उदाहरण के लिए,
00:05:35अनुशंसित उत्पाद या यहाँ ये व्यक्तिगत छूट।
00:05:38तो यहाँ ध्यान दें, एक अच्छा मिश्रण है।
00:05:42ओह, एक और पेज जो मैं आपको दिखाना भूल गई।
00:05:45उत्पाद पेज, सबसे महत्वपूर्ण वाला।
00:05:47यहाँ भी,
00:05:48हम उत्पाद जानकारी देख सकते हैं और फिर अगर हम चाहें तो अपने उपयोगकर्ता के लिए इसे सहेज सकते हैं।
00:05:52तो ध्यान दें कि इस ऐप में स्थिर और गतिशील सामग्री का एक अच्छा मिश्रण है क्योंकि हमारी सभी उपयोगकर्ता-निर्भर सुविधाओं के कारण।
00:05:59चलिए कोड पर भी एक नज़र डालते हैं, जो यहाँ होगा।
00:06:05तो मैं यहाँ Next.js 16 में ऐप राउटर का उपयोग कर रही हूँ,
00:06:07बेशक।
00:06:08मेरे पास मेरे सभी अलग-अलग पेज हैं,
00:06:10जैसे अबाउट पेज,
00:06:11ऑल पेज,
00:06:12हमारा प्रोडक्ट पेज।
00:06:13मेरे पास यह भी है-- मैं अपने ऐप फोल्डर को साफ रखने के लिए यहाँ फीचर स्लाइसिंग का उपयोग कर रही हूँ।
00:06:17मेरे पास विभिन्न कंपोनेंट्स और क्वेरीज़ हैं जो Prisma के साथ मेरे डेटाबेस से बात कर रहे हैं।
00:06:23तो हाँ, और मैंने जानबूझकर यह सब धीमा कर दिया।
00:06:25इसलिए हमारे पास यह वास्तव में लंबा लोडिंग चरण है,
00:06:28ताकि हम आसानी से देख सकें कि क्या हो रहा है।
00:06:31तो जिन सामान्य समस्याओं पर हम यहाँ काम करना चाहते थे और जो वास्तव में इस एप्लिकेशन में हैं,
00:06:36वे थीं प्रॉप ड्रिलिंग,
00:06:37जिससे सुविधाओं को बनाए रखना और रिफैक्टर करना मुश्किल हो जाता है,
00:06:40अतिरिक्त क्लाइंट-साइड जावास्क्रिप्ट,
00:06:42और स्थिर रेंडरिंग की कमी जिससे अतिरिक्त सर्वर लागत और खराब परफॉर्मेंस होती है।
00:06:47तो इस डेमो का लक्ष्य मूल रूप से कंपोजिशन,
00:06:49कैशिंग और आर्किटेक्चर से संबंधित कुछ स्मार्ट पैटर्न के साथ इस ऐप को बेहतर बनाना है ताकि उन सामान्य सुविधाओं को ठीक किया जा सके और इसे तेज़,
00:06:57अधिक स्केलेबल और बनाए रखने में आसान बनाया जा सके।
00:07:01तो चलिए उससे शुरू करते हैं।
00:07:02पहली समस्या जिसे हम ठीक करना चाहते हैं,
00:07:04वह वास्तव में प्रॉप ड्रिलिंग से संबंधित है।
00:07:05और वह यहाँ पेज में होगा।
00:07:10ठीक यहीं ध्यान दें,
00:07:11मेरे पास यहाँ शीर्ष पर यह 'लॉग इन' वेरिएबल है।
00:07:15और आप देख सकते हैं कि मैं इसे कुछ कंपोनेंट्स को पास कर रही हूँ।
00:07:17इसे वास्तव में इस व्यक्तिगत बैनर में कई स्तरों से पास किया गया है।
00:07:20तो यह यहाँ चीजों को फिर से उपयोग करना मुश्किल बना देगा क्योंकि हमारे वेलकम बैनर के लिए हमेशा यह 'लॉग इन' निर्भरता होती है।
00:07:28तो सर्वर कंपोनेंट्स के साथ,
00:07:29सबसे अच्छा अभ्यास यह होगा कि डेटा फ़ेचिंग को उन कंपोनेंट्स में नीचे धकेला जाए जो इसका उपयोग कर रहे हैं और ट्री में गहराई तक प्रॉमिसेस को हल किया जाए।
00:07:37और इसके प्रमाणित होने के लिए,
00:07:39जब तक यह फ़ेच या रिएक्ट कैश जैसी किसी चीज़ का उपयोग कर रहा है,
00:07:42हम इसकी कई कॉलों को डुप्लिकेट कर सकते हैं,
00:07:44और हम इसे अपने कंपोनेंट्स के अंदर कहीं भी अपनी पसंद के अनुसार फिर से उपयोग कर सकते हैं।
00:07:48तो उसे फिर से उपयोग करना पूरी तरह से ठीक होगा।
00:07:51तो अब हम वास्तव में इसे यहाँ व्यक्तिगत अनुभाग में ले जा सकते हैं।
00:07:54और हमें अब इस प्रॉप की आवश्यकता नहीं होगी।
00:07:57और इसे सीधे-- उफ़-- यहाँ रख दें।
00:08:01और हमें इसे अब पास करने की आवश्यकता नहीं होगी।
00:08:04और चूंकि हम अब इस एसिंक्रोनस कॉल को व्यक्तिगत अनुभाग में ले जा रहे हैं,
00:08:07हम अब पेज को ब्लॉक नहीं कर रहे हैं।
00:08:09हम आगे बढ़ सकते हैं और इसे यहाँ एक साधारण सस्पेंस के साथ निलंबित कर सकते हैं।
00:08:13और हमें इस फॉलबैक की आवश्यकता नहीं होगी।
00:08:16वेलकम बैनर के लिए, मुझे लगता है कि हम वही करेंगे।
00:08:22लेकिन यहाँ 'लॉग इन' वेरिएबल या मान का उपयोग करने का प्रयास करना,
00:08:26यह काम नहीं करता,
00:08:27है ना?
00:08:27क्योंकि यह एक क्लाइंट कंपोनेंट है।
00:08:29तो हमें इसे एक अलग तरीके से हल करने की आवश्यकता है।
00:08:30और हम इसे हल करने के लिए यहाँ एक बहुत ही स्मार्ट पैटर्न का उपयोग करने जा रहे हैं।
00:08:33हम वास्तव में लेआउट में जाएंगे और यहाँ सब कुछ एक ऑथ प्रोवाइडर के साथ लपेटेंगे।
00:08:39तो मैं बस इसे अपने पूरे ऐप के चारों ओर यहाँ रखूँगा और इस 'लॉग इन' वेरिएबल को यहाँ प्राप्त करूँगा।
00:08:45और मैं निश्चित रूप से अपने पूरे रूट लेआउट को ब्लॉक नहीं करना चाहता।
00:08:48चलिए आगे बढ़ते हैं और यहाँ से 'await' हटाते हैं।
00:08:50और बस इसे एक प्रॉमिस के रूप में इस ऑथ प्रोवाइडर में पास करें।
00:08:55और इसमें बस वह प्रॉमिस हो सकता है।
00:08:57यह बस वहाँ तब तक रहेगा जब तक हम इसे पढ़ने के लिए तैयार नहीं हो जाते।
00:09:01तो अब हमने इसे सेट कर लिया है।
00:09:03इसका मतलब है कि हम वास्तव में आगे बढ़ सकते हैं और सबसे पहले इस प्रॉप से छुटकारा पा सकते हैं।
00:09:09और हम इस एक को व्यक्तिगत बैनर तक ड्रिलिंग करने से छुटकारा पा लेंगे।
00:09:12और हम यहाँ प्रॉप ड्रिलिंग या सिग्नेचर से भी छुटकारा पा लेंगे।
00:09:16और अब हम इस ऑथ प्रोवाइडर का उपयोग करके व्यक्तिगत बैनर के अंदर स्थानीय रूप से इस 'लॉग इन' मान को फ़ेच कर सकते हैं,
00:09:22उस प्रोवाइडर के साथ 'use auth' का उपयोग करके जिसे हमने अभी बनाया है।
00:09:26और इसे 'use' के साथ पढ़ें।
00:09:28तो यह वास्तव में एक तरह से काम करेगा जहाँ हमें इसे हल करते समय निलंबित करने की आवश्यकता होगी।
00:09:33तो अब मैंने उस छोटे डेटा फ़ेच को व्यक्तिगत बैनर के अंदर सह-स्थित कर दिया है।
00:09:37और मुझे उन प्रॉप्स को इधर-उधर पास करने की आवश्यकता नहीं है।
00:09:40और जब यह हल हो रहा है,
00:09:41तो चलिए आगे बढ़ते हैं और इसे भी एक फॉलबैक के साथ निलंबित करते हैं।
00:09:44और किसी भी अजीब संचयी बदलाव से बचने के लिए चलिए यहाँ एक सामान्य बैनर बनाते हैं।
00:09:51और अंत में, इससे भी छुटकारा पाएं।
00:09:53तो अब यह वेलकम बैनर कंपोजेबल है।
00:09:58यह पुनः प्रयोज्य है।
00:09:59हमारे पास होमपेज में कोई अजीब प्रॉप्स या निर्भरताएँ नहीं हैं।
00:10:02और चूंकि हम इसे इतनी आसानी से फिर से उपयोग कर सकते हैं,
00:10:05चलिए वास्तव में आगे बढ़ते हैं और इसे यहाँ इस ब्राउज़र पेज पर भी जोड़ते हैं,
00:10:10जो यहाँ होगा।
00:10:11और मैं बिना किसी निर्भरता के इसे यहाँ उपयोग कर सकता हूँ।
00:10:15तो इन पैटर्न के माध्यम से,
00:10:17हम अच्छी कंपोनेंट आर्किटेक्चर बनाए रखने में सक्षम हैं,
00:10:22रिएक्ट कैश,
00:10:23रिएक्ट यूज़ का उपयोग करके,
00:10:25और अपने कंपोनेंट्स को अधिक उपयोगी और कंपोजेबल बनाते हैं।
00:10:30ठीक है।
00:10:31चलिए अगली सामान्य चुनौती का सामना करते हैं,
00:10:34जो अत्यधिक क्लाइंट-साइड जावास्क्रिप्ट और कई जिम्मेदारियों वाले बड़े कंपोनेंट्स होंगे।
00:10:40वास्तव में, वह यहाँ 'ऑल' पेज में भी है।
00:10:43और फिर से, हमें इस वेलकम बैनर पर काम करना होगा।
00:10:46यह वर्तमान में एक क्लाइंट कंपोनेंट है।
00:10:48और इसके क्लाइंट कंपोनेंट होने का कारण यह है कि मेरे पास यहाँ यह बहुत ही सरल 'डिसमिस्ड' स्थिति है।
00:10:53मैं बस इस पर क्लिक कर सकता हूँ।
00:10:54यह एक अच्छा UI इंटरैक्शन है।
00:10:56वह ठीक है।
00:10:57हालांकि,
00:10:57जो इतना ठीक नहीं है,
00:10:58वह यह है कि उसके कारण,
00:11:00मैं इस पूरे कंपोनेंट को एक क्लाइंट-साइड कंपोनेंट या एक क्लाइंट कंपोनेंट में बदल देता हूँ।
00:11:04और मैं क्लाइंट-साइड फ़ेच करने के लिए swr का भी उपयोग करता हूँ।
00:11:07मेरे पास अब यहाँ यह API लेयर है।
00:11:08मेरे डेटा में अब टाइप सेफ्टी नहीं है।
00:11:11हाँ, यह आवश्यक नहीं है।
00:11:12और हम यहाँ चिंताओं के अलगाव को भी तोड़ रहे हैं क्योंकि हम डेटा के साथ UI लॉजिक को शामिल कर रहे हैं।
00:11:18तो चलिए आगे बढ़ते हैं और इसे ठीक करने के लिए एक और स्मार्ट पैटर्न का उपयोग करते हैं।
00:11:21इसे डोनट पैटर्न कहा जाता है।
00:11:23मूल रूप से,
00:11:24मैं इसे एक क्लाइंट-साइड रैपर में निकालने जा रही हूँ।
00:11:27तो चलिए यहाँ एक नया कंपोनेंट बनाते हैं।
00:11:29और चलिए इसे 'बैनर कंटेनर' कहते हैं।
00:11:32और इसमें 'use client' डायरेक्टिव के साथ हमारा इंटरैक्टिव लॉजिक होगा।
00:11:37हम सिग्नेचर बना सकते हैं।
00:11:38हम वह सब कुछ पेस्ट कर सकते हैं जो हमारे पास पहले था।
00:11:42और इन बैनरों का उपयोग करने के बजाय,
00:11:44मैं यहाँ एक प्रॉप स्लॉट करने जा रही हूँ,
00:11:47जो 'चिल्ड्रन' होगा।
00:11:48तो इसलिए इसे डोनट पैटर्न कहा जाता है।
00:11:50हम बस सर्वर रेंडर सामग्री के चारों ओर इस रैपर UI लॉजिक को बना रहे हैं,
00:11:54या यह सर्वर रेंडर सामग्री हो सकती है।
00:11:56और फिर चूंकि हमारे पास अब यह क्लाइंट-साइड निर्भरता नहीं है,
00:11:59हम आगे बढ़ सकते हैं और 'use client' को हटा सकते हैं।
00:12:01हम इसके बजाय यहाँ अपने 'isAuth' एसिंक्रोनस फ़ंक्शन का उपयोग कर सकते हैं।
00:12:06हम इसे एक एसिंक सर्वर कंपोनेंट में बदल सकते हैं।
00:12:09हम क्लाइंट-साइड फ़ेचिंग को सर्वर-साइड फ़ेचिंग से भी बदल सकते हैं।
00:12:11तो चलिए मैं आगे बढ़ता हूँ और सीधे यहाँ डिस्काउंट डेटा प्राप्त करता हूँ।
00:12:16डिस्काउंट डेटा।
00:12:18और बस पहले की तरह टाइप सेफ्टी के साथ अपने नियमित मानसिक मॉडल का उपयोग करें।
00:12:24और इसका मतलब है कि मैं इस API लेयर को भी हटा सकता हूँ जिसके साथ मैं वैसे भी काम नहीं करना चाहता।
00:12:29अंत में,
00:12:29'isLoading' के लिए,
00:12:30हम यहाँ एक नया वेलकम बैनर निर्यात कर सकते हैं,
00:12:33हमारे डोनट पैटर्न बैनर कंटेनर के साथ जिसमें सर्वर रेंडर सामग्री है।
00:12:38और इसका मतलब है कि हमें अब इस 'isLoading' की आवश्यकता नहीं है।
00:12:40तो हमने मूल रूप से इस पूरी चीज़ को एक सर्वर कंपोनेंट में रिफैक्टर किया है और एक UI लॉजिक पॉइंट निकाला है।
00:12:46लेकिन वह क्या है?
00:12:48ऐसा लगता है कि मेरे पास एक और त्रुटि है।
00:12:51तो यह वास्तव में मोशन के कारण है।
00:12:53मोशन का उपयोग करें।
00:12:54यह वास्तव में एक बेहतरीन एनिमेशन लाइब्रेरी है,
00:12:56लेकिन इसके लिए 'useClient' डायरेक्टिव की आवश्यकता होती है।
00:12:59और फिर से,
00:12:59हमें इसे केवल एनिमेशन के लिए 'useClient' बनाने की आवश्यकता नहीं है।
00:13:03हम फिर से एक डोनट पैटर्न रैपर बना सकते हैं और बस इन एनिमेशन के लिए रैपर निकाल सकते हैं।
00:13:10और इसका मतलब है कि हमें यहाँ कुछ भी क्लाइंट-साइड में बदलने की आवश्यकता नहीं है।
00:13:14और शायद मैं यहाँ कुछ भूल रही हूँ।
00:13:17हाँ।
00:13:18वहाँ हम गए।
00:13:21तो अब यहाँ सब कुछ सर्वर में बदल दिया गया है।
00:13:23हमारे पास वही इंटरैक्शन है।
00:13:24हमारे पास अभी भी यहाँ हमारा इंटरैक्टिव लॉजिक है,
00:13:27लेकिन अब हमारे पास डेटा फ़ेच करने का यह एक तरीका है।
00:13:29और हमारे पास बहुत कम क्लाइंट-साइड JS है।
00:13:31वास्तव में,
00:13:32मैं इस UI बाउंड्री हेल्पर के लिए खुद इस डोनट पैटर्न का उपयोग कर रही हूँ,
00:13:40जो ऐसा दिखता है।
00:13:42क्या आप वह देखते हैं?
00:13:43तो यह फिर से दिखाता है, मेरा क्या मतलब है, है ना?
00:13:45डोनट पैटर्न के साथ,
00:13:46हमारे पास एक सर्वर कंपोनेंट के चारों ओर यह क्लाइंट कंपोनेंट है।
00:13:49मैंने यहाँ अपने कई अन्य कंपोनेंट्स को भी इस UI हेल्पर के साथ चिह्नित किया है।
00:13:53यहाँ भी, मेरे पास और सर्वर कंपोनेंट्स हैं।
00:13:56चलिए आगे बढ़ते हैं और उन्हें भी सुधारते हैं,
00:13:59चूंकि हम अब तक इसमें काफी अच्छे हो गए हैं।
00:14:01वे फुटर में हैं।
00:14:04ये श्रेणियाँ-- मेरा मतलब है,
00:14:05मेरे पास यह अच्छा कंपोनेंट है जो अपना डेटा फ़ेच कर रहा है।
00:14:08और मैं बस यह 'शो मोर' चीज़ जोड़ना चाहती थी,
00:14:11बस अगर यह वास्तव में लंबा हो जाता है।
00:14:14और डोनट पैटर्न के साथ,
00:14:15मैं बस यहाँ एक 'शो मोर' कंपोनेंट को लपेट सकता हूँ।
00:14:20और इसमें मेरा UI लॉजिक होगा।
00:14:23और यह ऐसा दिखता है, है ना?
00:14:27काफी शानदार।
00:14:28और इसमें अब क्लाइंट लॉजिक है,
00:14:30जो हमें स्टेट का उपयोग करने की अनुमति देता है।
00:14:33हम 'चिल्ड्रन काउंट' और 'टू एरे' का उपयोग करके इसे स्लाइस कर रहे हैं।
00:14:36और यहाँ जो इतना शानदार है वह यह है कि ये दोनों अब पूरी तरह से कंपोजेबल,
00:14:39पुनः प्रयोज्य कंपोनेंट्स हैं जो इस तरह एक साथ काम करते हैं।
00:14:42तो यह वास्तव में इन पैटर्न की सुंदरता है जो हम यहाँ सीख रहे हैं।
00:14:45आप इसका उपयोग किसी भी चीज़ के लिए कर सकते हैं।
00:14:50मैं इसका उपयोग यहाँ इस मोडल के लिए भी करती हूँ।
00:14:52हाँ,
00:14:52अगली बार जब आप अपने सर्वर कंपोनेंट्स में किसी भी प्रकार का क्लाइंट लॉजिक जोड़ने पर विचार कर रहे हों तो इसे याद रखें।
00:14:59ठीक है, हम डोनट पैटर्न जानते हैं।
00:15:01हम जानते हैं कि इन कंपोजेबल कंपोनेंट्स को बनाने और plans.js से बचने के लिए इसका उपयोग कैसे करें,
00:15:07ताकि हम अंतिम समस्या की ओर बढ़ सकें।
00:15:10चलिए मैं आगे बढ़ता हूँ और इसे फिर से बंद करता हूँ।
00:15:13तो वह स्थिर रेंडरिंग रणनीतियों की कमी के साथ होगा, है ना?
00:15:18मेरे बिल्ड आउटपुट को देखते हुए,
00:15:20मेरे पास वास्तव में यहाँ हर एक पेज एक गतिशील पेज है।
00:15:24तो इसका मतलब है कि जब भी मैं यहाँ कुछ लोड करता हूँ,
00:15:27यह हर एक उपयोगकर्ता के लिए चलेगा।
00:15:29क्षमा करें।
00:15:30हर एक उपयोगकर्ता जो इसके लिए खुला है,
00:15:31उसे यह लोडिंग स्थिति मिलेगी।
00:15:33यह सर्वर लागत बर्बाद करेगा, परफॉर्मेंस को खराब करेगा।
00:15:37और इसका मतलब यह भी है कि मेरे पेजों के अंदर कुछ गतिशील रेंडरिंग का कारण बन रहा है या मेरे सभी पेजों के लिए गतिशील रेंडरिंग को बाध्य कर रहा है।
00:15:45वास्तव में, यह मेरे रूट लेआउट के अंदर है।
00:15:49मुझे नहीं पता कि आपने इसका अनुभव किया है या नहीं।
00:15:51यह यहाँ है।
00:15:53मेरे हेडर में, मेरे पास यह उपयोगकर्ता प्रोफाइल है।
00:15:57और यह,
00:15:57बेशक,
00:15:58वर्तमान उपयोगकर्ता को प्राप्त करने के लिए कुकीज़ का उपयोग कर रहा है,
00:16:00और इसका मतलब है कि बाकी सब कुछ भी गतिशील रूप से रेंडर किया गया है।
00:16:02क्योंकि फिर से,
00:16:03पेज या तो गतिशील या स्थिर हो सकते हैं,
00:16:05है ना?
00:16:06यह एक काफी सामान्य समस्या है और कुछ ऐसा है जिसे Next के पिछले संस्करणों में पहले भी हल किया गया है,
00:16:11तो चलिए देखते हैं कि हम क्या कर सकते हैं।
00:16:13एक चीज़ जो हम कर सकते हैं वह है एक रूट ग्रुप बनाना और अपने ऐप को स्थिर और गतिशील अनुभागों में विभाजित करना जो मुझे अपने अबाउट पेज को निकालने की अनुमति देगा।
00:16:23मैं इसे स्थिर रूप से रेंडर कर सकता था।
00:16:25कुछ ऐप्स के लिए यह ठीक है,
00:16:26लेकिन मेरे मामले में,
00:16:28महत्वपूर्ण पेज प्रोडक्ट पेज है,
00:16:29और यह अभी भी गतिशील है,
00:16:31इसलिए वास्तव में मददगार नहीं है।
00:16:33इस रणनीति के बारे में क्या?
00:16:35तो यहाँ मैं इस रिक्वेस्ट कॉन्टेक्स्ट पैरामीटर को बना रही हूँ जो मेरे URL में एक निश्चित स्थिति को एन्कोड कर रहा है,
00:16:41और फिर मैं अपने पेजों के सभी विभिन्न वेरिएंट को उत्पन्न करने के लिए 'जेनरेट स्टैटिक पैरामीटर्स' का उपयोग कर सकती हूँ।
00:16:46वह वास्तव में,
00:16:47क्लाइंट-साइड से उपयोगकर्ता डेटा फ़ेच करने के साथ मिलकर,
00:16:51मुझे इसे मेरे प्रोडक्ट पेज पर कैश करने की अनुमति देगा।
00:16:54निश्चित रूप से एक व्यवहार्य पैटर्न।
00:16:55यह वर्सेल फ़्लैग्स SDK द्वारा अनुशंसित है जिसे प्रीकंप्यूट पैटर्न कहा जाता है,
00:17:00मुझे लगता है।
00:17:00लेकिन यह वास्तव में जटिल है,
00:17:02और मेरे पास डेटा फ़ेच करने के कई तरीके हैं।
00:17:04और वास्तव में,
00:17:04मैं अपने पूरे ऐप को इसमें फिर से लिखना नहीं चाहती।
00:17:07तो क्या होगा अगर हमें उन वर्कअराउंड में से कोई भी नहीं करना पड़े?
00:17:10क्या होगा अगर कोई सरल तरीका होता?
00:17:12खैर, है।
00:17:14चलिए फिर से अपने एप्लिकेशन पर वापस आते हैं।
00:17:17तो हम वास्तव में नेक्स्ट कॉन्फ़िग में जा सकते हैं और बस कैश कंपोनेंट्स को सक्षम कर सकते हैं।
00:17:23ओह, बढ़िया।
00:17:25ठीक है,
00:17:25और यह क्या करता है,
00:17:26जैसा कि आप कीनोट से जानते हैं,
00:17:28वास्तव में हमारी सभी एसिंक्रोनस कॉलों को अनुरोध समय या गतिशील में शामिल करेगा।
00:17:34और यह हमें त्रुटियाँ भी देगा जब भी हमारे पास कोई एसिंक्रोनस कॉल निलंबित नहीं होगा,
00:17:39और यह हमें यह 'use cache' डायरेक्टिव देगा जिसका उपयोग हम किसी पेज,
00:17:43फ़ंक्शन या कंपोनेंट को दानेदार रूप से कैश करने के लिए कर सकते हैं।
00:17:48तो हाँ, चलिए आगे बढ़ते हैं और इसका उपयोग करते हैं।
00:17:51हम यहाँ होम पेज से शुरू कर सकते हैं।
00:17:55चलिए एक नज़र डालते हैं।
00:17:56तो फिर से, मेरे पास स्थिर और गतिशील सामग्री का यह मिश्रण है।
00:17:59मेरे पास मेरे लिए मेरा वेलकम बैनर है,
00:18:01आपके लिए भी कुछ मेरे लिए।
00:18:03चलिए इस UI हेल्पर के साथ फिर से उस पर एक नज़र डालते हैं।
00:18:06तो उदाहरण के लिए,
00:18:07बैनर यहाँ इसके साथ गतिशील रूप से रेंडर किया गया है।
00:18:10जबकि मैंने इसे हाइब्रिड रेंडरिंग के रूप में चिह्नित किया है क्योंकि हीरो,
00:18:14यह इस एसिंक्रोनस चीज़ को फ़ेच कर रहा है और यह काफी धीरे चल रहा है।
00:18:18लेकिन यह किसी भी प्रकार के उपयोगकर्ता डेटा या गतिशील API पर निर्भर नहीं करता है।
00:18:21तो इसका मतलब है कि यहाँ जो कुछ भी हाइब्रिड रेंडर किया गया है,
00:18:24उसे वास्तव में अनुरोधों और उपयोगकर्ताओं के बीच फिर से उपयोग किया जा सकता है।
00:18:27और हम उस पर 'use cache' डायरेक्टिव का उपयोग कर सकते हैं।
00:18:30तो चलिए यहाँ 'use cache' डायरेक्टिव जोड़ते हैं और इसे कैश के रूप में चिह्नित करते हैं।
00:18:35और वह मुझे अनुमति देगा-- जब भी मैं इस पेज को फिर से लोड करूँ-- मैंने इसे सहेजा नहीं।
00:18:43वहाँ हम गए।
00:18:44यह इस हिस्से को फिर से लोड नहीं करेगा क्योंकि यह कैश किया गया है।
00:18:47यह अब स्थिर है, है ना?
00:18:49और अन्य संबंधित API भी हैं जैसे कैश टैग जो मुझे इसे टाइप करने या विशिष्ट कैश एंट्री को दानेदार रूप से मान्य करने या अपनी प्रकटीकरण अवधि को परिभाषित करने की अनुमति देते हैं।
00:19:01लेकिन इस डेमो के लिए,
00:19:02चलिए बस सादे डायरेक्टिव पर ध्यान केंद्रित करते हैं।
00:19:05अब जब मेरे पास यह 'use cache' डायरेक्टिव है,
00:19:07मैं वास्तव में इस हीरो के चारों ओर अपनी सस्पेंस बाउंड्री हटा सकता हूँ।
00:19:10और इसका मतलब है-- खैर,
00:19:12यह क्या करेगा कि आंशिक प्रीरेंडरिंग वास्तव में आगे बढ़ सकती है और इसे स्टैटिकली प्रीरेंडर किए गए शेल में शामिल कर सकती है ताकि यह हीरो,
00:19:20इस मामले में,
00:19:21मेरे बिल्ड आउटपुट का हिस्सा होगा।
00:19:23चलिए इस पेज पर बाकी सब कुछ के लिए भी वही करते हैं जिसे साझा किया जा सकता है।
00:19:28उदाहरण के लिए, मेरे पास यहाँ यह फीचर श्रेणियाँ हैं।
00:19:31चलिए आगे बढ़ते हैं और वहाँ भी वही करते हैं।
00:19:33और 'use cache' डायरेक्टिव जोड़ें और इसे कैश के रूप में चिह्नित करें।
00:19:37उस तरह।
00:19:39और हम सस्पेंस बाउंड्री हटा सकते हैं।
00:19:40हमें अब इसकी आवश्यकता नहीं होगी।
00:19:43फीचर प्रोडक्ट्स के लिए भी वही।
00:19:44चलिए 'use cache' जोड़ते हैं और इसे कैश के रूप में चिह्नित करते हैं।
00:19:48उफ़।
00:19:50और फिर सस्पेंस बाउंड्री हटा दें।
00:19:52तो ध्यान दें कि मैं यहाँ कितनी जटिलता को हटाने में सक्षम हूँ।
00:19:55मुझे अपने स्केलेटन,
00:19:56अपने संचयी लेआउट शिफ्ट के बारे में चिंता करने की आवश्यकता नहीं है जो मैं पहले कर रही थी।
00:20:00और पेज अब नहीं है-- या हमारे पास अब यह पेज-स्तर की स्थिर बनाम गतिशील सीमा नहीं है।
00:20:07तो अब जब मैं इस पेज को लोड करता हूँ,
00:20:10आप देखेंगे कि यहाँ सब कुछ कैश किया गया है सिवाय इस वास्तव में उपयोगकर्ता विशिष्ट सामग्री के।
00:20:16ठीक है।
00:20:18तो यह काफी शानदार है।
00:20:19चलिए ब्राउज़ पेज पर चलते हैं और वहाँ भी वही करते हैं।
00:20:24हाँ।
00:20:25मैंने पहले ही अपनी सभी सीमाओं को यहाँ चिह्नित कर दिया है ताकि आप आसानी से समझ सकें कि क्या हो रहा है।
00:20:29और मैं कम से कम इन श्रेणियों को कैश करना चाहती हूँ।
00:20:33हालांकि, ऐसा लगता है कि मुझे एक त्रुटि मिल रही है।
00:20:37शायद आप इसे पहचानते हैं।
00:20:38तो इसका मतलब है कि मेरे पास एक ब्लॉकिंग रूट है।
00:20:40और मैं सस्पेंस बाउंड्री का उपयोग नहीं कर रही हूँ जब मुझे करना चाहिए।
00:20:43इसे रीफ्रेश करना, यह सच है, है ना?
00:20:46यह वास्तव में धीमा है।
00:20:47और यह परफॉर्मेंस समस्याओं और खराब UX का कारण बन रहा है।
00:20:50तो यह बहुत अच्छा है।
00:20:51Use cache या कैश कंपोनेंट्स मुझे मेरे ब्लॉकिंग रूट्स की पहचान करने में मदद कर रहे हैं।
00:20:55चलिए वास्तव में देखते हैं कि उसके अंदर क्या हो रहा है।
00:20:57तो यह समस्या है, है ना?
00:20:59मैं इन श्रेणियों को शीर्ष स्तर पर फ़ेच कर रही हूँ और मेरे पास इसके ऊपर कोई सस्पेंस बाउंड्री नहीं है।
00:21:03मूल रूप से, हमें एक विकल्प चुनना होगा।
00:21:05या तो हम ऊपर एक सस्पेंस बाउंड्री जोड़ते हैं या हम कैशिंग में शामिल होते हैं।
00:21:09चलिए पहले सरल चीज़ करते हैं और बस यहाँ एक लोडिंग TSX जोड़ते हैं।
00:21:12और चलिए यहाँ एक लोडिंग पेज जोड़ते हैं,
00:21:17कुछ अच्छा स्केलेटन UI।
00:21:21वह काफी अच्छा है।
00:21:21इसने त्रुटि को हल कर दिया,
00:21:22लेकिन जब मैं इंतजार कर रहा हूँ तो इस पेज पर कुछ भी उपयोगी नहीं हो रहा है।
00:21:25मैं खोज भी नहीं सकता।
00:21:27तो कैश कंपोनेंट्स के साथ,
00:21:29गतिशील ऐसा है-- या स्थिर बनाम गतिशील एक पैमाने की तरह है।
00:21:33और यह हम पर निर्भर करता है कि हम अपने पेजों में कितना स्थिर चाहते हैं।
00:21:37तो चलिए इस पेज को स्थिर की ओर अधिक ले जाते हैं और बस इस लोडिंग TSX को फिर से हटाते हैं।
00:21:43और फिर उन पैटर्न का उपयोग करें जो हम पहले सीख रहे थे इस डेटा फ़ेच को कंपोनेंट में धकेलने और इसे UI के साथ सह-स्थित करने के लिए।
00:21:50तो इसे यहाँ मेरे रिस्पॉन्सिव कैटेगरी फ़िल्टर में नीचे ले जाएँ।
00:21:54मेरे पास दो हैं क्योंकि रिस्पॉन्सिव डिज़ाइन।
00:21:57मैं वास्तव में आगे बढ़ सकता हूँ और बस इसे यहाँ जोड़ सकता हूँ।
00:22:01उफ़।
00:22:03और इसे इम्पोर्ट करें।
00:22:05मुझे अब इस प्रॉम्प्ट की आवश्यकता नहीं है।
00:22:06वास्तव में, मेरा कंपोनेंट अधिक कंपोजेबल हो रहा है।
00:22:09और इसे निलंबित करने के बजाय,
00:22:11चलिए बस 'use cache' डायरेक्टिव जोड़ते हैं।
00:22:14और वह पर्याप्त होना चाहिए।
00:22:16तो ध्यान दें कि मुझे इस बात पर अधिक सोचने के लिए मजबूर किया जा रहा है कि मैं अपने प्रॉमिसेस को कहाँ हल कर रही हूँ और वास्तव में इसके माध्यम से अपनी कंपोनेंट आर्किटेक्चर में सुधार कर रही हूँ।
00:22:24मुझे इसे निलंबित करने की आवश्यकता नहीं है।
00:22:25यह बस यहाँ स्टैटिक शेल में शामिल किया जाएगा।
00:22:28प्रोडक्ट लिस्ट, चलिए मैं इसे ताज़ा रखता हूँ।
00:22:35तो मैं उसे हर बार फिर से लोड कर सकता हूँ।
00:22:37जबकि नीचे की श्रेणियाँ, मैं इन्हें भी कैश करना चाहती हूँ।
00:22:41तो चलिए आगे बढ़ते हैं और फुटर पर जाते हैं।
00:22:44और चूंकि मैं यहाँ डोनट पैटर्न का उपयोग कर रही हूँ,
00:22:47इसे वास्तव में कैश किया जा सकता है भले ही यह UI के इस हिस्से के अंदर हो जो इंटरैक्टिव है।
00:22:54तो यह पूरी तरह से ठीक है।
00:22:55तो वह पैटर्न न केवल कंपोजिशन के लिए अच्छा था,
00:22:57बल्कि कैशिंग के लिए भी।
00:22:58मुझे लगता है कि वहाँ एक और त्रुटि है।
00:23:03चलिए देखते हैं वह क्या है।
00:23:04अभी भी यह त्रुटि है।
00:23:08यह वास्तव में इन सर्च फ़्रेम के कारण है।
00:23:10सर्च फ़्रेम, जैसा कि हम जानते हैं, एक गतिशील API है।
00:23:12मैं इसे कैश नहीं कर सकता।
00:23:13लेकिन मैं इसे अपनी UI के अधिक हिस्से को प्रकट करने और इसे स्थिर बनाने के लिए गहराई तक हल कर सकता हूँ।
00:23:18तो चलिए आगे बढ़ते हैं और इसे नीचे ले जाते हैं,
00:23:20इसे एक प्रॉमिस के रूप में प्रोडक्ट लिस्ट को पास करते हैं।
00:23:24हम इसे यहाँ एक प्रॉमिस के रूप में टाइप करेंगे, उस तरह।
00:23:30चलिए इसे प्रोडक्ट लिस्ट के अंदर हल करते हैं,
00:23:33यहाँ और यहाँ हल किए गए सर्च पैरामीटर्स का उपयोग करते हैं।
00:23:36और चूंकि यह यहाँ निलंबित है, त्रुटि चली जाएगी।
00:23:40तो इसे फिर से लोड करने पर,
00:23:42यहाँ केवल वही हिस्सा फिर से लोड हो रहा है जिसे मैंने विशेष रूप से गतिशील होने के लिए चुना था।
00:23:48बाकी सब कुछ कैश किया जा सकता है।
00:23:49और इसका मतलब है कि मैं अपने बैनर के साथ इंटरैक्ट कर सकता हूँ या खोज भी कर सकता हूँ क्योंकि वह हिस्सा पहले ही प्री-रेंडर किया जा चुका है।
00:23:57ठीक है,
00:23:57चलिए यहाँ अंतिम पेज करते हैं,
00:24:00जो प्रोडक्ट पेज है,
00:24:02जो सबसे कठिन और सबसे महत्वपूर्ण है।
00:24:05यह अभी वास्तव में खराब है।
00:24:08यह एक ई-कॉमर्स प्लेटफॉर्म के लिए बहुत महत्वपूर्ण है,
00:24:10जाहिर है।
00:24:11ठीक है, चलिए आगे बढ़ते हैं और उसे भी ठीक करते हैं।
00:24:15तो यहाँ मेरे पास यह प्रोडक्ट पेज है।
00:24:18चलिए यहाँ केवल पुनः प्रयोज्य सामग्री को कैश करना शुरू करते हैं,
00:24:22उदाहरण के लिए,
00:24:22उत्पाद ही।
00:24:23और बस यहाँ 'use cache' जोड़ें और इसे कैश के रूप में चिह्नित करें।
00:24:27वह ठीक होना चाहिए।
00:24:28इसका मतलब है कि हम यहाँ सस्पेंस बाउंड्री हटा सकते हैं।
00:24:33ठीक है,
00:24:33और यह अब यहाँ हर अनुरोध पर फिर से लोड नहीं हो रहा है,
00:24:37है ना?
00:24:38उत्पाद विवरण के लिए, चलिए वही करते हैं।
00:24:40चलिए 'use cache' जोड़ते हैं।
00:24:41चलिए इसे कैश के रूप में चिह्नित करते हैं और देखते हैं कि क्या वह भी काम करेगा।
00:24:47ऐसा नहीं हुआ।
00:24:48वास्तव में, यह एक अलग त्रुटि है।
00:24:50यह मुझे बता रहा है कि मैं इस कैश किए गए सेगमेंट के अंदर गतिशील API का उपयोग करने की कोशिश कर रही हूँ।
00:24:54और वह सच है।
00:24:54मैं 'सेव प्रोडक्ट' बटन का उपयोग कर रही हूँ, है ना?
00:24:56उसने मुझे सहेजी गई स्थिति को क्लिक करने और टॉगल करने की अनुमति दी।
00:25:00तो आपको क्या लगता है कि हम इसके साथ क्या कर सकते हैं?
00:25:03हम फिर से डोनट पैटर्न का उपयोग कर सकते हैं।
00:25:06वास्तव में,
00:25:06हम गतिशील सेगमेंट को कैश सेगमेंट में भी स्लॉट कर सकते हैं।
00:25:10तो हम उन्हें पहले की तरह ही इंटरलीव कर रहे हैं,
00:25:12लेकिन कैश के साथ।
00:25:12तो यह काफी शानदार है।
00:25:14चलिए आगे बढ़ते हैं और यहाँ बच्चों को उस तरह जोड़ते हैं।
00:25:19और यह त्रुटि को हटा देगा।
00:25:21और मैं बस इसे यहाँ अपने पेज के इस एक गतिशील सेगमेंट के चारों ओर लपेट सकता हूँ,
00:25:26सस्पेंस बाउंड्री हटा सकता हूँ,
00:25:28और पेज के उस एक गतिशील हिस्से के लिए बस एक बहुत छोटा बुकमार्क UI जोड़ सकता हूँ।
00:25:34और चलिए देखते हैं कि अब वह कैसा दिखता है।
00:25:40तो ध्यान दें कि लगभग पूरा UI उपलब्ध है,
00:25:42लेकिन मेरे पास यह एक छोटा सा हिस्सा है जो गतिशील है,
00:25:46और वह ठीक है।
00:25:47बाकी सब कुछ अभी भी वहीं है।
00:25:48और चलिए समीक्षाओं को गतिशील रखते हैं क्योंकि हम उन्हें ताज़ा रख सकते हैं।
00:25:53अभी भी एक और त्रुटि है।
00:25:54चलिए बस जल्दी से उसे हल करते हैं।
00:25:56फिर से, यह params है।
00:25:58मुझे मदद मिल रही है कि मुझे एक विकल्प चुनना होगा या तो एक लोडिंग फॉलबैक जोड़ें या इसे कैश करें।
00:26:04चलिए इस मामले में 'जेनरेट स्टैटिक पैरामीटर्स' का उपयोग करते हैं।
00:26:07यह आपके उपयोग के मामले और आपके डेटा सेट पर निर्भर करता है।
00:26:10लेकिन इस मामले के लिए,
00:26:11मैं बस कुछ प्री-रेंडर किए गए पूर्वनिर्धारित पेज जोड़ने जा रही हूँ और फिर बाकी को कैश करूँगी जैसे वे उपयोगकर्ताओं द्वारा उत्पन्न होते हैं।
00:26:17और यह यहाँ मेरी त्रुटि को हटा देगा।
00:26:20तो मुझे लगता है कि मैंने वास्तव में अपना रिफैक्टर पूरा कर लिया है।
00:26:22चलिए आगे बढ़ते हैं और डिप्लॉयड संस्करण पर एक नज़र डालते हैं और देखते हैं कि वह कैसा दिखता है।
00:26:26तो मैंने इसे अभी वर्सेल पर डिप्लॉय किया है।
00:26:27और याद रखें,
00:26:29मैंने जानबूझकर यहाँ बहुत सारे डेटा फ़ेच को धीमा कर दिया था।
00:26:35और फिर भी,
00:26:36जब मैं इस पेज को शुरू में लोड करता हूँ,
00:26:38सब कुछ पहले से ही उपलब्ध है।
00:26:40यहाँ केवल वे कुछ गतिशील सेगमेंट हैं जैसे छूट और 'आपके लिए'।
00:26:46ब्राउज़ ऑल के साथ भी वही।
00:26:47पूरा UI पहले से ही उपलब्ध है।
00:26:50और उत्पाद के लिए ही, यह बस तुरंत महसूस होता है।
00:26:54और फिर से याद रखें,
00:26:55कि ये सभी कैश सेगमेंट आंशिक प्री-रेंडरिंग के साथ स्टैटिक शेल में शामिल किए जाएंगे।
00:27:00और इसे नए Next 16 क्लाइंट राउटर में बेहतर प्रीफ़ेचिंग का उपयोग करके प्रीफ़ेच किया जा सकता है।
00:27:05तो इसका मतलब है कि हर नेविगेशन बस-- यह बस इतना तेज़ लगता है,
00:27:09है ना?
00:27:09ठीक है,
00:27:10संक्षेप में,
00:27:11कैश कंपोनेंट्स के साथ,
00:27:14अब स्थिर बनाम गतिशील नहीं है।
00:27:17और हमें गतिशील API से बचने या गतिशील सामग्री से समझौता करने की आवश्यकता नहीं है।
00:27:28और हम इन जटिल हैक्स और वर्कअराउंड को छोड़ सकते हैं जो कई डेटा फ़ेचिंग रणनीतियों का उपयोग करते हैं बस उस एक-- इस कैश हिट के लिए,
00:27:36जैसा कि मैंने आपको दिखाया।
00:27:37तो आधुनिक Next.js में, गतिशील बनाम स्थिर एक पैमाना है।
00:27:40और हम तय करते हैं कि हम अपने ऐप्स में कितना स्थिर चाहते हैं।
00:27:43और जब तक हम कुछ पैटर्न का पालन करते हैं,
00:27:45हमारे पास एक मानसिक मॉडल हो सकता है,
00:27:47जो डिफ़ॉल्ट रूप से प्रदर्शनकारी,
00:27:49कंपोजेबल और स्केलेबल है।
00:27:50तो चलिए स्लाइड्स पर वापस आते हैं।
00:27:53तो अगर आप नहीं हैं-- हम उसकी गति से पहले से ही प्रभावित नहीं हैं,
00:27:55यह लाइटहाउस स्कोर है।
00:27:56तो मैंने वर्सेल स्पीड इनसाइट्स के साथ कुछ फील्ड डेटा एकत्र किया।
00:28:00तो हमारे पास सभी सबसे महत्वपूर्ण पेजों पर 100 का स्कोर है,
00:28:03होम पेज,
00:28:04प्रोडक्ट पेज,
00:28:05और प्रोडक्ट लिस्ट,
00:28:06भले ही वे अत्यधिक गतिशील हों।
00:28:08तो चलिए अंत में उन पैटर्न का सारांश करते हैं जो Next.js ऐप्स में स्केलेबिलिटी और परफॉर्मेंस सुनिश्चित करेंगे और हमें नवीनतम नवाचारों का लाभ उठाने और इस तरह के स्कोर प्राप्त करने की अनुमति देंगे।
00:28:18तो सबसे पहले,
00:28:19हम कंपोनेंट ट्री में गहराई तक प्रॉमिसेस को हल करके अपनी आर्किटेक्चर को परिष्कृत कर सकते हैं और डुप्लिकेट काम करने के लिए रिएक्ट कैश का उपयोग करके कंपोनेंट्स के अंदर स्थानीय रूप से डेटा फ़ेच कर सकते हैं।
00:28:28हम क्लाइंट कंपोनेंट्स को अत्यधिक प्रॉप पास करने से बच सकते हैं,
00:28:31रिएक्ट यूज़ के साथ संयुक्त कॉन्टेक्स्ट प्रोवाइडर्स का उपयोग करके।
00:28:35दूसरा,
00:28:35हम डोनट पैटर्न का उपयोग करके क्लाइंट कंपोनेंट्स की सेवा को कंपोज कर सकते हैं ताकि क्लाइंट-साइड जावास्क्रिप्ट को कम किया जा सके,
00:28:40चिंताओं का स्पष्ट अलगाव रखा जा सके और कंपोनेंट के पुनः उपयोग की अनुमति दी जा सके।
00:28:43और यह पैटर्न हमें बाद में हमारे कंपोज किए गए सर्वर कंपोनेंट्स को कैश करने में और सक्षम करेगा।
00:28:50और अंत में,
00:28:50हम 'use cache' के साथ पेज,
00:28:51कंपोनेंट या फ़ंक्शन द्वारा कैश और प्री-रेंडर कर सकते हैं ताकि अनावश्यक प्रोसेसिंग को खत्म किया जा सके,
00:28:56परफॉर्मेंस और SEO को बढ़ावा दिया जा सके,
00:28:57और आंशिक प्री-रेंडरिंग को ऐप के इन सेगमेंट को स्थिर रूप से रेंडर करने दिया जा सके।
00:29:01और यदि हमारी सामग्री वास्तव में गतिशील है,
00:29:04हम इसे उचित लोडिंग फॉलबैक के साथ निलंबित कर सकते हैं।
00:29:07और याद रखें कि यह सब जुड़ा हुआ है।
00:29:09तो आपकी आर्किटेक्चर जितनी बेहतर होगी,
00:29:10उसे कंपोज करना उतना ही आसान होगा,
00:29:12और सर्वोत्तम परिणामों के साथ कैश और प्री-रेंडर करना उतना ही आसान होगा।
00:29:15उदाहरण के लिए,
00:29:15ट्री में गहराई तक गतिशील API को हल करना आपको एक बड़ा आंशिक रूप से मुद्रित स्थिर शेल बनाने की अनुमति देगा।
00:29:22और इसके साथ, यह एप्लिकेशन के पूर्ण संस्करण का रेपो है।
00:29:25वहाँ इतनी सारी चीजें हैं जो मैंने वहाँ दिखाई भी नहीं हैं जिन्हें आप देख सकते हैं।
00:29:29और आप QR कोड स्कैन करके मेरे सोशल वहाँ रेपो के साथ पा सकते हैं यदि आप खुद एक तस्वीर लेना और उसे टाइप करना नहीं चाहते हैं।
00:29:36तो हाँ, मेरी तरफ से बस इतना ही।
00:29:37मुझे यहाँ आमंत्रित करने के लिए Next.js कॉन्फ़ का धन्यवाद।
00:29:39[संगीत बज रहा है]