00:00:00Tan Stack Start इन दिनों काफी चर्चा में है,
00:00:02और सवाल यह है कि क्या आपको Next.js से स्विच करना चाहिए?
00:00:06क्या यह Next.js से बेहतर है?
00:00:08कल मैंने एक पूरी लाइवस्ट्रीम की थी जिसमें मैंने दोनों की तुलना की और दो ऐप्स बनाए या एक ऐप दो बार बनाया,
00:00:15एक बार Next.js के साथ और एक बार Tan Stack Start के साथ और अगर आप उसे देखना चाहते हैं तो देख सकते हैं,
00:00:21लेकिन यहाँ मैं आपको अपना संक्षिप्त सारांश दूंगा कि क्या अलग है,
00:00:24क्या बेहतर है और आपको किसका उपयोग करना चाहिए।
00:00:27बेशक,
00:00:28यह सिर्फ मेरी राय है,
00:00:29स्पष्ट रूप से कोई वस्तुनिष्ठ तुलना नहीं,
00:00:31लेकिन मैं दोनों के बारे में अपना अनुभव साझा करूंगा और Next.js और Tan Stack Start के बारे में मैं क्या सोचता हूँ।
00:00:37अब मैंने कुछ पैमाने तैयार किए हैं जिनका उपयोग मैं दोनों की तुलना करने के लिए करना चाहता हूँ और आप और भी जोड़ सकते हैं और यहाँ और भी फ्रेमवर्क जोड़ सकते हैं।
00:00:47मेरा मतलब है,
00:00:48हम Remix,
00:00:48React Router को शामिल कर सकते हैं,
00:00:50Vue के लिए Nuxt को शामिल कर सकते हैं,
00:00:52SvelteKit के बारे में बात कर सकते हैं,
00:00:53लेकिन मैं नहीं करूंगा,
00:00:55यह वीडियो Next.js और Tan Stack Start के बारे में है,
00:00:57इसलिए नहीं कि अन्य खराब हैं,
00:00:59बल्कि इसलिए क्योंकि इन दोनों की अक्सर तुलना की जाती है।
00:01:01अब पहले यह ध्यान देने योग्य है कि Tan Stack Start अंततः सिर्फ Tan Stack Router और कुछ सर्वर चीज़ें हैं,
00:01:09मुख्य रूप से।
00:01:10तो आप Tan Stack Router को अकेले इस्तेमाल कर सकते हैं यदि आप एक सिंगल पेज एप्लिकेशन बनाना चाहते हैं जिसे सर्वर-साइड रेंडरिंग और सर्वर-साइड फंक्शन की आवश्यकता नहीं है,
00:01:19उदाहरण के लिए।
00:01:19आप अपने React Vite ऐप में React Router के बजाय Tan Stack Router का उपयोग कर सकते हैं,
00:01:24उदाहरण के लिए।
00:01:25Tan Stack Start फिर,
00:01:26जैसा कि उल्लेख किया गया है,
00:01:27Tan Stack Router में सर्वर-साइड चीज़ें जोड़ता है,
00:01:29जिससे यह एक पूर्ण React फुल-स्टैक फ्रेमवर्क बन जाता है।
00:01:32बिल्कुल Next.js की तरह,
00:01:33जो निश्चित रूप से एक फुल-स्टैक React फ्रेमवर्क भी है।
00:01:37और यह भी महत्वपूर्ण है।
00:01:38मुझे कभी-कभी यह सवाल मिलता है कि क्या आपको Next.js या React Router के साथ React Vite का उपयोग करना चाहिए और मुझे लगता है कि यह गलत तुलना है।
00:01:47अगर आपको सर्वर-साइड लॉजिक की आवश्यकता नहीं है,
00:01:49यदि आपको सर्वर-साइड रेंडरिंग की आवश्यकता नहीं है,
00:01:52तो आपको बस React Vite का उपयोग करना चाहिए,
00:01:55यानी React के साथ एक Vite प्रोजेक्ट,
00:01:57और React Router या Tan Stack Router जोड़ना चाहिए।
00:02:00उस स्थिति में Next.js के रास्ते पर जाने की कोई आवश्यकता नहीं है।
00:02:02वैसे भी, चलिए उस तुलना से शुरू करते हैं।
00:02:05और पहला पैमाना जो मैंने चुना वह दोनों की AI तत्परता है,
00:02:09क्योंकि निश्चित रूप से इन दिनों यह मायने रखता है।
00:02:12आप बहुत संभावना से कुछ कोड जेनरेट करने के लिए AI का उपयोग कर रहे हैं,
00:02:16शायद वह सारा कोड जो आप अपने Next.js या Tan Stack Start प्रोजेक्ट में चाहते हैं,
00:02:21और इसलिए AI को निश्चित रूप से यह जानने की आवश्यकता है कि वह कोड कैसे लिखना है।
00:02:25स्पष्ट रूप से,
00:02:26आप उचित संदर्भ प्रदान कर सकते हैं और करना भी चाहिए,
00:02:30दस्तावेज़ीकरण पृष्ठों की प्रतिलिपि बनाकर या Context 7 जैसे MCP का उपयोग करके ताकि AI डॉक्स तक पहुँच सके,
00:02:37या AI को बताकर कि उसे कुछ वेब खोज करनी चाहिए,
00:02:40या एजेंट स्किल्स जोड़कर जो AI को सिखाएं कि Tan Stack Start या Next.js का उपयोग कैसे करना है।
00:02:47लेकिन शुरुआत से,
00:02:48अगर आप ChatGPT से Tan Stack Start के बारे में कोई सवाल पूछते हैं,
00:02:52तो यह बहुत संभव है कि यह इसके बारे में Next.js से कम जानता होगा और जो यह जानता है वह शायद गलत है।
00:02:59क्योंकि अभी भी,
00:03:00जब मैं इसे रिकॉर्ड कर रहा हूँ,
00:03:02Tan Stack Start अभी भी रिलीज़ कैंडिडेट चरण में है,
00:03:05जिसका मतलब है कि अब कोई बड़े ब्रेकिंग बदलाव नहीं होंगे,
00:03:08लेकिन पूरी तरह से स्थिर भी नहीं है।
00:03:10पिछले साल यह मुख्य रूप से बीटा और अल्फा में रहा है और यही वह ज्ञान है जो इन AI चैटबॉट्स के पास शुरुआत से है,
00:03:17यही कारण है कि उनके पास शुरुआत से Tan Stack Start के बारे में गलत ज्ञान होगा।
00:03:23तो शुरुआत से AI तत्परता इतनी अच्छी नहीं है,
00:03:27यह निश्चित रूप से Next.js के लिए बेहतर है।
00:03:31अब Next.js के साथ निश्चित रूप से वर्षों में बदलाव भी आए हैं,
00:03:35नया use cache directive है जिसे AI शुरुआत से उतनी अच्छी तरह नहीं जानता लेकिन AI को ऐप राउटर,
00:03:41React सर्वर कंपोनेंट्स और उन सभी चीज़ों के बारे में काफी अच्छी समझ है इसलिए यह निश्चित रूप से Tan Stack Start की तुलना में Next.js के लिए बेहतर है।
00:03:51लेकिन फिर से,
00:03:52जैसा कि उल्लेख किया गया है,
00:03:54आपको यह सुनिश्चित करना चाहिए कि आप AI को उचित अतिरिक्त संदर्भ दें जो उसे चाहिए,
00:03:59अन्यथा आप बस AI का गलत उपयोग कर रहे हैं।
00:04:02इकोसिस्टम के बारे में क्या और इससे मेरा मतलब है अन्य संसाधन जो आप पा सकते हैं जैसे ट्यूटोरियल,
00:04:09YouTube वीडियो,
00:04:10कोर्स,
00:04:10शायद इन फ्रेमवर्क के लिए अतिरिक्त पैकेज भी।
00:04:13और यहाँ निःसंदेह Next.js,
00:04:15Tan Stack Start की तुलना में बहुत बेहतर दिखता है,
00:04:19बस इसलिए क्योंकि यह पुराना है,
00:04:21यह लंबे समय से मौजूद है,
00:04:23आपको इस पर अधिक संसाधन मिलेंगे क्योंकि यह बड़ा भी है।
00:04:27यह ध्यान देने योग्य है कि यह बड़ा है जिसका मतलब है अधिक उपयोग,
00:04:31क्योंकि Next.js उस डिफ़ॉल्ट स्टैक का हिस्सा है जो AI के पास है जहाँ यह मूल रूप से आपको अधिकांश वेब ऐप्स के लिए Next.js,
00:04:40React,
00:04:40Tailwind और TypeScript देता है,
00:04:42Tan Stack Start शायद कभी भी इसकी डिफ़ॉल्ट पसंद नहीं होगा।
00:04:47और इसलिए आश्चर्य की बात नहीं कि यदि आप दोनों के डाउनलोड चार्ट की तुलना करें,
00:04:51तो हाँ,
00:04:51Tan Stack Start में निश्चित रूप से कम डाउनलोड हैं जैसा कि आप देख सकते हैं।
00:04:56यदि आप Next.js को हटा दें तो आप Tan Stack Start के लिए एक अच्छी ऊपर की ओर रुझान देख सकते हैं।
00:05:01उस इकोसिस्टम बिंदु से संबंधित है निःसंदेह सीखने में आसानी,
00:05:05लेकिन केवल इतना ही नहीं।
00:05:07सीखने में आसानी से मेरा मतलब है कि चीज़ को सीखना कितना सरल है?
00:05:11और मुझे पता है कि निःसंदेह अब AI के युग में आप इसे सीखने में रुचि नहीं रखते,
00:05:15लेकिन एक अच्छे डेवलपर के रूप में आपको उस चीज़ को समझना चाहिए जिसके साथ आप काम कर रहे हैं।
00:05:19हो सकता है कि आप अब सारा कोड हाथ से नहीं लिख रहे हों,
00:05:22लेकिन आपको AI द्वारा आपके लिए जेनरेट किए गए कोड को समझना चाहिए।
00:05:25इसलिए इसे सीखना अभी भी महत्वपूर्ण है।
00:05:28और यहाँ मैं कहूँगा कि Next.js के लिए यह मिश्रित है।
00:05:33आप इसे दे सकते हैं,
00:05:34मुझे यकीन नहीं है कि मैं इसे एक या दो प्लस देना चाहूँगा क्योंकि app router के साथ Next.js के साथ शुरुआत करना और वैसे यह सब यहाँ app router को संदर्भित करता है,
00:05:45काफी सरल है।
00:05:46यह समझ में आता है।
00:05:47कल स्ट्रीम में मैंने एक छोटा नोट लेने वाला एप्लिकेशन बनाया जहाँ आप नोट्स बना सकते थे,
00:05:53सेव कर सकते थे और रेंडर कर सकते थे।
00:05:56और आप Next.js के साथ यह कुछ page.tsx फाइलें निर्दिष्ट करके करते हैं जो आपके,
00:06:01आपने सही अनुमान लगाया,
00:06:02पेज हैं।
00:06:03आपके पास डायनेमिक सेगमेंट हो सकते हैं।
00:06:04और अपने एप्लिकेशन को बनाने के लिए उस सिंटैक्स और उस दृष्टिकोण को सीखना अंत में काफी सरल है।
00:06:12मुझे यह भी लगता है कि डॉक्यूमेंटेशन मुख्य अवधारणाओं के माध्यम से चरण दर चरण आपका मार्गदर्शन करने और Next.js के साथ शुरुआत करने में अच्छा काम करता है।
00:06:22लेकिन चीज़ें अधिक जटिल हो जाती हैं जब आप अधिक जटिल एप्लिकेशन बनाते हैं और जब आप कैशिंग जैसी अधिक उन्नत अवधारणाओं में गहराई से जाते हैं।
00:06:30और विशेष रूप से कैशिंग का हिस्सा बहुत भ्रमित करने वाला हो सकता है क्योंकि Next.js ने यह निर्णय लिया कि app router की शुरुआत के साथ वे विभिन्न परतों पर कुछ बहुत आक्रामक कैशिंग करना चाहते थे और इसे समझना और अपने कंपोनेंट्स को उस बिल्ट-इन कैशिंग के साथ अच्छी तरह से काम करने के लिए कॉन्फ़िगर करना और अपने उपयोगकर्ताओं को वह व्यवहार देना जो आप चाहते हैं,
00:06:54मुश्किल हो सकता है।
00:06:55मैं यह कहूँगा।
00:06:56तो शुरुआत करना बढ़िया है।
00:06:59अधिक उन्नत सुविधाओं को सीखना कठिन है।
00:07:02मैं शायद इसे यहाँ दो प्लस दूँगा।
00:07:05और मैं Tan Stack Start को भी वही दूँगा लेकिन बहुत अलग कारणों से।
00:07:09Tan Stack Start के लिए मैं कहूँगा कि शुरुआत करना शायद Next.js की तुलना में थोड़ा कठिन है क्योंकि उनके शुरुआती डॉक्स Next.js डॉक्स जितने अच्छे नहीं हैं।
00:07:20मैं कहूँगा कि यहाँ महत्वपूर्ण अवधारणाएँ गायब हैं जैसे डेटा फेचिंग या म्यूटेशन।
00:07:27हालाँकि यदि आपके पास पहले से Next.js का ज्ञान है तो एक बहुत अच्छा तुलना दस्तावेज़ है जो डेटा फेचिंग और म्यूटेशन से संबंधित मुख्य विशेषताओं की तुलना करता है।
00:07:36लेकिन मुझे लगता है कि यह थोड़ा कठिन हो सकता है क्योंकि डॉक्स,
00:07:40भले ही मैं कहूँगा कि उन्हें बहुत बेहतर बनाया गया है,
00:07:43फिर भी उस ब्रेन डंप भावना का थोड़ा सा अहसास है जहाँ यह बहुत स्पष्ट नहीं है कि आपको किस लेख की आवश्यकता है और उदाहरण के लिए यहाँ कोई डेटा फेचिंग लेख नहीं है और इस तरह की चीज़ें।
00:07:54इसके अलावा चूँकि Tan Stack Start,
00:07:56Tan Stack Router पर बनाया गया है,
00:07:58सभी राउटिंग संबंधित चीज़ों के लिए आपको Tan Stack Router डॉक्यूमेंटेशन में जाना होगा जो पहली बार देखने पर काफी भारी भी है।
00:08:07लेकिन एक बार जब आप उस प्रारंभिक बाधा को पार कर लेते हैं तो यह बहुत आसान हो जाता है और यह सब मेरी राय में बहुत समझ में आता है और यह इतना मुश्किल नहीं है और Next.js के साथ होने वाली कैशिंग संबंधित समस्याओं जैसी कोई छिपी हुई फुट गन नहीं हैं।
00:08:22इसलिए मैं कहूँगा कि Tan Stack Start के साथ शुरुआत करना कठिन है लेकिन एक बार जब आप चल पड़ते हैं तो Next.js की तुलना में अधिक उन्नत सुविधाओं में आगे बढ़ना और गहराई से जाना आसान होता है।
00:08:32जैसा कि मैंने बताया,
00:08:34यह निश्चित रूप से केवल मेरा व्यक्तिगत दृष्टिकोण है।
00:08:36अब डेवलपर के दृष्टिकोण से उपयोग में आसानी के बारे में क्या?
00:08:41इसके साथ काम करना कितना मजेदार है?
00:08:43यह पूरी तरह से व्यक्तिपरक है निश्चित रूप से,
00:08:46लेकिन Next.js में यहाँ कुछ समस्याएं जरूर हैं।
00:08:48न केवल सीखने से संबंधित समस्याएं बल्कि अन्य समस्याएं भी।
00:08:53उदाहरण के लिए कैशिंग के साथ ऐसा हो सकता है कि आपका ऐप डेवलपमेंट मोड में प्रोडक्शन मोड की तुलना में अलग तरह से व्यवहार करे,
00:08:59जिसका मतलब है कि आपको हमेशा इसे प्रोडक्शन मोड में टेस्ट करना पड़ता है जो आपको वैसे भी करना चाहिए,
00:09:04लेकिन यह काफी परेशान करने वाला हो जाता है अगर आपको डेवलपमेंट के दौरान हर बार ऐसा करना पड़े क्योंकि इससे आपकी गति धीमी हो जाती है।
00:09:11तो यह एक बड़ी समस्या थी जो मुझे अतीत में हुई थी।
00:09:14डेव सर्वर भी काफी धीमा हो सकता है।
00:09:18कम से कम अगर आप webpack वर्जन का उपयोग कर रहे हैं तो नया डिफ़ॉल्ट turbo pack वर्जन उस मामले में बहुत बेहतर है,
00:09:25लेकिन मेरे अनुभव में यह Vite आधारित सेटअप को नहीं हरा पाता जो TanStack Start आपको देता है।
00:09:30इसलिए मैं यहाँ तीन प्लस दूँगा क्योंकि मेरे अनुभव में डेवलपर एक्सपीरियंस के दृष्टिकोण से इसके साथ काम करना बेहद सुगम रहा है।
00:09:40यह तेज है,
00:09:41यह अनुमानित है,
00:09:42अधिकांश समय कोई अजीब व्यवहार नहीं है,
00:09:45अभी भी यहाँ-वहाँ कुछ विचित्रताएँ हैं और यह अभी भी रिलीज़ कैंडिडेट चरण में है,
00:09:50लेकिन कुल मिलाकर मैं Next.js की तुलना में TanStack Start के डेवलपर एक्सपीरियंस को प्राथमिकता देता हूँ।
00:09:57जाहिर है कि आपके लिए यह अलग हो सकता है।
00:10:01अब Next.js और TanStack Start द्वारा दी जाने वाली ठोस सुविधाओं के बारे में क्या?
00:10:06राउटिंग के लिए जैसा कि मैंने आपको Next.js में दिखाया,
00:10:08आपके पास एक फाइल आधारित दृष्टिकोण है,
00:10:10आप फाइलें सेट करते हैं जो आपके रूट्स के रूप में कार्य करती हैं और वहाँ आपके पास विभिन्न नामकरण कन्वेंशन हैं जिनका आपको पालन करना होता है।
00:10:16डॉक्यूमेंटेशन उन्हें समझाने का अच्छा काम करता है,
00:10:19लेकिन निश्चित रूप से parallel routes जैसी अधिक जटिल सुविधाएँ भी हैं जिन्हें सेट अप करना विचित्र हो सकता है।
00:10:25TanStack Start में भी जैसा कि बताया गया है TanStack Router का उपयोग करते हुए एक फाइल आधारित दृष्टिकोण है और यहाँ भी आपको फाइलनेम कन्वेंशन का पालन करना होता है जो इसी तरह सीखने में आसान हैं।
00:10:36TanStack Start से आपको जो एक फायदा मिलता है वह यह है कि इसकी फाइल आधारित राउटिंग के साथ यह आपको पूर्ण टाइप सेफ्टी देता है जो काफी अच्छा हो सकता है।
00:10:45तो दोनों फाइल आधारित हैं और यह आपकी प्राथमिकताओं पर निर्भर करता है कि आप कौन सा नामकरण पैटर्न पसंद करते हैं,
00:10:52लेकिन TanStack Start में वह 100% टाइप सेफ्टी भी है जो इसके फाइल आधारित राउटर के साथ आती है जो अच्छी बात है।
00:11:00और यह अगले सवाल का भी जवाब देता है,
00:11:02Next.js में बहुत अच्छा TypeScript समर्थन है और मेरे अनुभव में TanStack Start में और भी बेहतर TypeScript समर्थन है।
00:11:11साथ ही जब server actions या server functions या जो भी आप उन्हें कहना चाहें और data fetching जैसी चीजों की बात आती है।
00:11:18तो हाँ,
00:11:18जब आप TypeScript का उपयोग करते हैं,
00:11:20जो मुझे लगता है कि आपको करना चाहिए,
00:11:22TanStack Start के साथ काम करना वास्तव में एक खुशी है।
00:11:24अब जब data fetching और data mutations की बात आती है,
00:11:27तो जैसा कि मैंने बताया दोनों आपको सर्वर पर कोड चलाने की अनुमति देते हैं,
00:11:31वे दोनों फुल स्टैक React एप्लिकेशन हैं लेकिन वे अलग-अलग दृष्टिकोण अपनाते हैं।
00:11:35Next.js React server components का उपयोग करता है और लंबे समय तक यह एकमात्र फ्रेमवर्क था जो React server components को सपोर्ट करता था।
00:11:43इसका मतलब है कि आपके पेज कंपोनेंट डिफ़ॉल्ट रूप से केवल सर्वर पर रेंडर होते हैं।
00:11:48वे कभी भी क्लाइंट पर पुनः रेंडर नहीं होते हैं,
00:11:50जिसका मतलब है कि आप अपने कंपोनेंट में इस तरह का data fetching कोड डाल सकते हैं जो पर्दे के पीछे एक डेटाबेस तक पहुँच करेगा और वह क्लाइंट तक नहीं जाएगा।
00:11:59TanStack Start का एक अलग दृष्टिकोण है।
00:12:01React server component समर्थन भी वहाँ जल्द ही आने वाला है,
00:12:04जब मैं इसे रिकॉर्ड कर रहा हूँ तब यह बाहर नहीं आया है,
00:12:07लेकिन जो दृष्टिकोण मैं आपको यहाँ दिखा रहा हूँ और जिसका मैंने अपने सभी प्रोजेक्ट्स में उपयोग किया है वह भी बना रहेगा,
00:12:14और उस दृष्टिकोण में आपके रूट कंपोनेंट डिफ़ॉल्ट रूप से सर्वर साइड और क्लाइंट साइड दोनों पर रेंडर होते हैं,
00:12:19सर्वर साइड पर प्री-रेंडर होते हैं,
00:12:21क्लाइंट साइड पर अपडेट होते हैं और इसलिए आप अपने सर्वर-साइड कोड को कंपोनेंट फंक्शन में नहीं डाल सकते।
00:12:27इसके बजाय यह एक लोडर पैटर्न का उपयोग करता है जिसे आप शायद Remix से जानते हों,
00:12:32जहाँ आप अपने routes में एक loader जोड़ सकते हैं जो client और server दोनों तरफ चलेगा,
00:12:37लेकिन फिर आप ऐसे functions को call कर सकते हैं जो create server functions से सजाए या लपेटे गए हों,
00:12:43जो कि Tan Stick Start द्वारा प्रदान किया गया एक function है जो किसी function को केवल server side पर चलने के लिए चिह्नित करता है लेकिन client side से callable बनाता है।
00:12:54यही एक server function है।
00:12:56और यदि आपके पास ऐसा function है तो आप इसे सुरक्षित रूप से loader में या component function body से भी call कर सकते हैं और code server side पर ही रहेगा।
00:13:05पर्दे के पीछे एक HTTP request भेजा जाएगा।
00:13:07तो Next.js मुख्य रूप से RSC पर निर्भर करता है हालाँकि आप वहाँ API endpoints भी सेट कर सकते हैं और Fetch API के साथ useEffect का उपयोग कर सकते हैं।
00:13:15Tan Stick Start loaders और server functions का उपयोग करता है हालाँकि यह भी ध्यान देने योग्य है कि वहाँ भी आप API routes सेट कर सकते हैं और Fetch API,
00:13:23Tan Stick query या ऐसा कुछ भी उपयोग कर सकते हैं,
00:13:26लेकिन मुख्य built-in दृष्टिकोण यह loader और server function वाला approach है।
00:13:31Mutations के लिए Next.js server actions का उपयोग करता है जो कि ऐसे actions हैं जिन्हें इस विशेष useServer directive से सजाया जाता है।
00:13:39Next.js में ये directives हैं useServer, useClient।
00:13:44कुछ लोग इन्हें पसंद नहीं करते,
00:13:45मैं भी इनका बड़ा fan नहीं हूँ,
00:13:47मैं यह कहूँगा।
00:13:48और यदि आपके पास useServer से सजाई गई कोई file है तो उसमें सभी functions server functions बन जाते हैं जो केवल server पर execute होंगे।
00:13:55Client side पर नहीं,
00:13:56हालाँकि आप फिर भी उन्हें client side से call कर सकते हैं।
00:13:59उदाहरण के लिए यह saveNode function जो मेरे पास यहाँ है जो database में एक node store करता है,
00:14:04फिर भी client side से call किया जा सकता है,
00:14:07उदाहरण के लिए useActionState hook का उपयोग करके।
00:14:10Tan Stick Start में हम बस इस createServer function approach का उपयोग करते रहते हैं क्योंकि मैंने उल्लेख किया था कि ये ऐसे functions हैं जिनके server पर चलने की गारंटी है और आप उन्हें data fetching या data mutations के लिए उपयोग कर सकते हैं क्योंकि फिर से code केवल server पर ही चलेगा।
00:14:24एक component function में जो client पर भी render होता है,
00:14:27आप Tan Stick Start द्वारा प्रदान किए गए useServer function hook का उपयोग अपने server function को wrap करने के लिए कर सकते हैं और यह अनिवार्य रूप से इसे client side से callable बनाता है और आपको automatic redirect handling जैसी अतिरिक्त सुविधाएँ देता है।
00:14:39तो यह मुझे अपने client side components से उस server function को call करने की अनुमति देता है।
00:14:43तो Next.js आधिकारिक React server functions का उपयोग करता है,
00:14:47Tan Stick Start अंत में अपने स्वयं के server functions का उपयोग करता है।
00:14:51सामान्य विचार बेशक समान ही है।
00:14:54अब caching के बारे में क्या?
00:14:56मैंने उल्लेख किया था कि यह कठिन हिस्सा है।
00:14:58यह Next.js में काफी aggressive और संभावित रूप से जटिल है।
00:15:04यह निश्चित रूप से Next.js के कठिन हिस्सों में से एक है।
00:15:07और मैं इसे अन्य सभी महत्वपूर्ण Next.js अवधारणाओं की तरह अपने Next.js course में cover करता हूँ,
00:15:13यदि आप Next.js के बारे में सब कुछ सीखना चाहते हैं।
00:15:16वह course आपको पूर्ण beginner से advanced Next.js user बनाने के लिए एक शानदार संसाधन है।
00:15:21लेकिन caching निश्चित रूप से Next.js के साथ अधिक समस्याग्रस्त विषयों में से एक है।
00:15:26फायदा बेशक यह है कि aggressive defaults के कारण आप संभावित रूप से अपने users के लिए काफी अच्छी caching प्राप्त कर सकते हैं।
00:15:35लेकिन आप आसानी से अपने पैर पर भी गोली मार सकते हैं।
00:15:38Tan Stick Start के लिए मैं इसे अच्छे defaults के रूप में summarize करूँगा।
00:15:43Next.js की तुलना में बहुत कम aggressive और सबसे महत्वपूर्ण बात,
00:15:47मेरे अनुभव में कम से कम development और production mode के बीच consistent।
00:15:52यह आपको caching भी देता है ताकि जब users routes के बीच navigate करें तो data एक निश्चित समय अवधि के लिए cache हो जाए।
00:16:00ताकि तेज navigation के लिए आप अपने server पर ढेर सारे requests न भेजें।
00:16:04और यह बेशक performance में बहुत मदद करता है लेकिन यह सब कुछ cache नहीं कर रहा है या अलग-अलग layers पर सब कुछ cache करने की कोशिश नहीं कर रहा है और यह एक developer के रूप में आपके जीवन को आसान बना सकता है।
00:16:14इसका मतलब बेशक यह भी है कि यदि आप अपने users के लिए सर्वोत्तम performance प्राप्त करना चाहते हैं और संभावित रूप से traffic बचाना चाहते हैं तो आपको स्वयं अच्छे caching headers सेट करने होंगे और इस बारे में थोड़ा अधिक सोचना होगा कि आप अपने application को कैसे cache करते हैं,
00:16:28जितना शायद आपको Next.js के साथ करने की आवश्यकता हो।
00:16:30वहाँ आपको अन्य समस्याओं के बारे में सोचना होगा।
00:16:32अब स्थिरता के बारे में क्या?
00:16:35अब यहाँ मैं शायद दोनों को दो प्लस दूँगा।
00:16:39वे दोनों काफी स्थिर हैं।
00:16:40जाहिर है Next.js अधिक परिपक्व है लेकिन मेरे अनुभव में पिछले कुछ वर्षों में यह काफी बगी रहा है,
00:16:48खासकर डेवलपमेंट सर्वर में क्रैश और इस तरह की समस्याएं रही हैं।
00:16:53लेकिन यह काफी बेहतर हो गया है और कुल मिलाकर यह एक स्थिर अनुभव है और निश्चित रूप से सैकड़ों और हजारों एप्लिकेशन हैं जो इसका उपयोग करते हैं और बिना किसी समस्या के प्रोडक्शन में चल रहे हैं।
00:17:03यह निश्चित रूप से ध्यान देने योग्य महत्वपूर्ण बात है।
00:17:06जाहिर है हमारे पास वे React सुरक्षा कमजोरियाँ थीं लेकिन एक तो उनमें से कुछ भविष्य में खोजी जा सकती हैं और 10-stack start को भी प्रभावित कर सकती हैं,
00:17:14खासकर जब वे भी React सर्वर कंपोनेंट्स को सपोर्ट करना शुरू करेंगे और दूसरा यह मुख्य रूप से Next.js की समस्या नहीं है।
00:17:2110-stack start अभी भी रिलीज कैंडिडेट फेज में है और मैंने निश्चित रूप से इसके साथ अपनी पूरी समस्याओं का सामना किया है।
00:17:28कुछ अजीब क्रैश,
00:17:29अजीब एरर मैसेज,
00:17:30यहाँ-वहाँ अजीब व्यवहार तो मैं इसे केवल एक प्लस भी दे सकता था लेकिन चूंकि यह रिलीज कैंडिडेट फेज में है और उसके लिए यह काफी स्थिर है,
00:17:39मैं यहाँ दो के लिए जाऊंगा।
00:17:41बस इस बात से अवगत रहें कि 10-stack start का उपयोग करते समय आप निश्चित रूप से कुछ समस्याओं में फंस सकते हैं।
00:17:47फिर भी कहना चाहूंगा कि मेरे पास प्रोडक्शन में चल रहे एप्लिकेशन हैं जैसे buildmygraphic.com यहाँ जिसका उपयोग आप AI की मदद से अद्भुत इन्फोग्राफिक्स बनाने के लिए कर सकते हैं जो 10-stack start द्वारा संचालित हैं और बिना किसी समस्या के चल रहे हैं और बनाने में भी कोई समस्या नहीं थी।
00:18:02बैटरीज़ इन्क्लूडेड के बारे में क्या?
00:18:04तो ऑप्टिमाइज़्ड इमेज रेंडरिंग,
00:18:06इंटरनेशनलाइज़ेशन या इस तरह की कोई भी मजेदार चीज़ प्राप्त करना कितना आसान है।
00:18:12यहाँ Next.js निश्चित रूप से बेहतर काम कर रहा है।
00:18:15इसमें इसका बिल्ट-इन इमेज कंपोनेंट है,
00:18:18इसमें बिल्ट-इन इंटरनेशनलाइज़ेशन सपोर्ट है और 10-stack start में इनमें से कुछ भी नहीं है।
00:18:24पक्का नहीं कि यह योजनाबद्ध है,
00:18:26पक्का नहीं कि यह आपके लिए महत्वपूर्ण है,
00:18:28यह निश्चित रूप से कुछ ऐसा नहीं है जिसकी आपको जरूरत है,
00:18:31अन्य विकल्प हैं,
00:18:32थर्ड-पार्टी पैकेज हैं जिनका आप उपयोग कर सकते हैं,
00:18:35शायद आप बिल्ट-इन चीज़ें भी नहीं चाहते लेकिन अगर यह कुछ ऐसा है जिसकी आपको परवाह है या चिंता है तो Next.js शायद यहाँ बेहतर विकल्प है।
00:18:43और फिर डिप्लॉयमेंट के बारे में क्या?
00:18:45यह एक कठिन विषय है।
00:18:48Next.js निश्चित रूप से Vercel द्वारा बनाया गया है और यदि आप इसे Vercel पर डिप्लॉय करते हैं तो यह बहुत आसान और सुचारू है।
00:18:56सब कुछ उसके लिए ऑप्टिमाइज़ किया गया है।
00:18:58ऐतिहासिक रूप से इसे अपने स्वयं के सर्वर पर डिप्लॉय करना थोड़ा मुश्किल रहा है उदाहरण के लिए लेकिन ईमानदारी से कहूं तो Next.js टीम ने वास्तव में इसे आसान बनाने के लिए कुछ काम किया है,
00:19:09बेहतर डॉक्यूमेंटेशन लिखा है और इसलिए आजकल मैं कहूंगा कि आप इसे बिना किसी समस्या के अन्य सेवाओं पर भी पूरी तरह से डिप्लॉय कर सकते हैं।
00:19:17तो यह दो या तीन प्लस है,
00:19:19तीन प्लस यदि आप Vercel का उपयोग करते हैं और दो शायद यदि आप अन्य प्रोवाइडर्स का उपयोग करते हैं मैं कहूंगा।
00:19:2810 stack start के लिए मैं अभी यहाँ दो के लिए जाऊंगा लेकिन मैं इसे तीन भी दे सकता था।
00:19:36मेरे द्वारा दो देने का मुख्य कारण यह है कि जिस समय मैं इसे रिकॉर्ड कर रहा हूं उस समय होस्टिंग डॉक्यूमेंटेशन अभी भी थोड़ा पेचीदा है।
00:19:45आधिकारिक रूप से समर्थित पार्टनर हैं जैसे Cloudflare और Netlify जिनके पास काफी अच्छा डॉक्यूमेंटेशन है और जहाँ डिप्लॉयमेंट शायद काफी सुचारू है,
00:19:53हालाँकि मैंने उनका उपयोग नहीं किया है।
00:19:56यदि आप इसे उदाहरण के लिए BUN के साथ अपने स्वयं के VPS पर चलाना चाहते हैं तो यहाँ कुछ निर्देश हैं लेकिन मुझे उनका पालन करना थोड़ा मुश्किल लगा या कुछ समस्याओं में फंस गया जो सभी हल करने योग्य थीं लेकिन इसमें निश्चित रूप से मुझे कुछ समय लगा।
00:20:12मुझे लगता है कि एक बार जब BUN या Node के साथ VPS पर 10 stack start को डिप्लॉय करने के लिए एक अच्छी गाइड हो जाए तो डिप्लॉयमेंट निश्चित रूप से आसान हो जाएगी,
00:20:20खासकर यदि उस गाइड में कुछ बेस्ट प्रैक्टिसेज के बारे में सिफारिशें शामिल हों जिनका आपको पालन करना चाहिए या संभावित समस्याएं जिनका आप सामना कर सकते हैं।
00:20:29लेकिन जैसा कि उल्लेख किया गया है,
00:20:30आप निश्चित रूप से यहाँ तीन प्लस के लिए भी जा सकते हैं यह इस पर निर्भर करता है कि आप इसे कैसे देखते हैं।
00:20:34जैसा कि मैंने उल्लेख किया यह सब व्यक्तिपरक है और केवल मेरा अनुभव,
00:20:38मेरे विचार हैं और जाहिर है मैं आपके विचार सुनने में भी रुचि रखता हूं।
00:20:42यदि आपने स्विच किया है या Next.js और T3 Stack के बारे में आप क्या सोचते हैं,
00:20:45यदि आप स्विच करने पर विचार कर रहे हैं या यदि आप इनमें से किसी का भी उपयोग नहीं करते हैं और इसके बजाय किसी अन्य विकल्प का उपयोग करते हैं।