गैट्सबी बनाम नेक्स्ट.जेएस

Gatsbyjs और Next.js अभी वेब डेवलपमेंट के दो सबसे चर्चित विषय हैं। मैंने YouTube पर संदेश बोर्ड और टिप्पणी अनुभागों में बहुत से लोगों को यह पूछते हुए देखा है कि आप एक को दूसरे के ऊपर क्यों चुनेंगे। मैंने पिछले 12 महीनों से नेक्स्ट.जेएस और गैट्सबीज की दुनिया में अपना सिर दबा रखा है, और मेरा मानना ​​है कि यह मुझे इस चर्चा में शामिल होने के योग्य बनाता है।

जब आपके प्रोजेक्ट के लिए Next.js या Gatsby का उपयोग करने की बात आती है, तो "सही नौकरी अभिव्यक्ति के लिए सही टूल" दिमाग में आता है। लेकिन चिंता न करें, मैं आपको इस तरह के अस्पष्ट जवाब के साथ फांसी पर लटकाने नहीं जा रहा हूं।

TLDR:

• Gatsby और Next.js दोनों ही रिएक्ट फ्रेमवर्क हैं और दोनों SSR (सर्वर-साइड रेंडरिंग) आउट ऑफ द बॉक्स (SEO के लिए बढ़िया) प्रदान करते हैं।
• अगला.js दोनों के बारे में कम राय रखता है, लेकिन इसमें सीखने की अवस्था तेज है, कम बैटरी शामिल है, जिसका मतलब है कि आप अपने दम पर अधिक हैं।
• अगला.js यकीनन उन साइटों के लिए बेहतर है जिनके पास बड़ी मात्रा में डेटा है जिन्हें बार-बार अपडेट करने की आवश्यकता होती है।

Next.js और Gatsby.js समानताएं

एक अच्छा कारण है कि लोग Gatsby और Next.js की तुलना कर रहे हैं। वे अलग होने की तुलना में बहुत अधिक समान हैं। इसलिए, आइए पहले देखें कि Gatsby और Next.js में क्या समानता है, और फिर हम उनके मतभेदों पर चर्चा करेंगे।

गैट्सबी और नेक्स्ट.जेएस:

• दोनों ही आउट-ऑफ़-द-बॉक्स उच्च प्रदर्शन प्रदान करते हैं।
• क्या दोनों जावास्क्रिप्ट फ्रेमवर्क हैं, और वे दोनों रिएक्ट-आधारित हैं।
• वे दोनों आपको सर्वर-साइड रेंडरिंग (SSR) और क्लाइंट-साइड रेंडरिंग (CSR) आउट ऑफ द बॉक्स देते हैं
• वे दोनों स्टेटिक साइट जेनरेशन (SSG) और डायनामिक साइट जेनरेशन (DSG) प्रदान करते हैं।
• इन दोनों में कोड-विभाजन और उत्कृष्ट कैशिंग आउट ऑफ द बॉक्स है।
• वे दोनों पेज डेटा प्रीफ़ेचिंग की पेशकश करते हैं। Gatsby यह स्वचालित रूप से करता है, Next.js में एक prefetch है प्रॉप जिसे आप उनके Link . के साथ उपयोग कर सकते हैं घटक (रूटिंग के लिए)।
• वे दोनों अपने स्वयं के राउटर का उपयोग करके पृष्ठों के लिए स्वचालित रूटिंग प्रदान करते हैं (Gatsby रीच राउटर का उपयोग करता है, Next.js Next.js राउटर का उपयोग करता है)।
• गैट्सबी और नेक्स्ट.जेएस दोनों रेस्ट एपीआई से डेटा प्राप्त कर सकते हैं और उदा। सीएमएस बैकएंड के रूप में वर्डप्रेस, कंटेंटफुल या प्रिज्मिक का उपयोग करके।

जब सर्वर-साइड रेंडरिंग (SSR) और क्लाइंट-साइड रेंडरिंग (CSR) की बात आती है, तो आउट ऑफ द बॉक्स, Gatsby और Next.js आपको दोनों दुनिया के सर्वश्रेष्ठ प्रदान करते हैं। एसएसआर एसईओ के लिए बहुत अच्छा है, और सीएसआर आपके उपयोगकर्ताओं को वे शानदार तत्काल पृष्ठ संक्रमण (बिना पेज रीफ्रेश किए) देने के लिए बहुत अच्छा है जो आपको एक देशी मोबाइल ऐप का उपयोग करने की याद दिलाता है।

Next.js और Gatsby.js अंतर

मैं यह स्पष्ट करना चाहता हूं कि निम्नलिखित किसी भी ढांचे के साथ बॉक्स से बाहर निकलने पर आधारित है, न कि उनमें से कोई भी अनुकूलन के माध्यम से संभावित रूप से बदल सकता है। Next.js और Gatsby दोनों ही अत्यधिक लचीले हैं।

Gatsby और Next.js को "असीम रूप से" अनुकूलित किया जा सकता है। वे दोनों आपको इतना कुछ बताने के लिए अपने रास्ते से हट जाएंगे। क्लासिक वाक्यांश "सभी लोगों के लिए सब कुछ बनना चाहता है" दिमाग में आता है। उनमें से कोई भी संभावित ग्राहकों को खत्म नहीं करना चाहता है, और अच्छे व्यवसायी होने के नाते, वे अपनी कमजोरियों के बजाय अपनी ताकत को उजागर करने पर ध्यान केंद्रित करते हैं। जैसा उन्हें करना चाहिए।

उनमें से कोई भी झूठ नहीं बोल रहा है, लेकिन क्योंकि Next.js और Gatsby दोनों इतने लचीले हैं और लगातार विकसित होते हैं (बड़ी वित्तीय सहायता के साथ), यह कहना मुश्किल है कि जब आप लंबे समय के बारे में बात करते हैं तो एक उपकरण दूसरे की तुलना में विशिष्ट उपयोग के मामले में बेहतर होता है। अवधि।

खेल में मेरी कोई त्वचा नहीं है, इसलिए यह मेरा निष्पक्ष दृष्टिकोण है। मुख्य क्षेत्र जो Next.js और Gatsby को अलग बनाते हैं:

• Gatsby आपको GraphQL (राय) का उपयोग करने के लिए बाध्य करता है, Next.js के साथ यह वैकल्पिक है।
• गैट्सबी इमेज ट्रांसफ़ॉर्मेशन को आउट-ऑफ़-द-बॉक्स (कुछ हद तक रायशुदा) संभालता है, हालांकि आपको इसका उपयोग करने के लिए बाध्य नहीं किया जाता है।
• गैट्सबी छवियों में स्वचालित रूप से आलसी-लोडिंग जोड़ता है (राय वाला)
• एक Gatsby साइट को एक छोटा प्लग इन इंस्टॉल करके एक प्रोग्रेसिव वेब ऐप (PWA) में बदला जा सकता है। मैंने Next.js में ऐसा करने का कोई आसान तरीका नहीं देखा है।
• Next.js डायनामिक और स्टैटिक रूटिंग दोनों प्रदान करता है। जहाँ तक मैं बता सकता हूँ Gatsby केवल स्थिर/हार्डकोडेड रूटिंग प्रदान करता है। मैं इसके बारे में 100% निश्चित नहीं हूं क्योंकि स्पष्ट जानकारी प्राप्त करना कठिन है (जब मुझे और पता चलेगा तो मैं इसे अपडेट करूंगा)।
• Gatsby साइट-बिल्डिंग (SSG) चरण के दौरान अपना SSR करता है।
• Next.js अपने SSR को पृष्ठ अनुरोध पर गतिशील रूप से करता है - लेकिन वे अपनी स्थिर निर्यात सुविधा के माध्यम से SSG भी प्रदान करते हैं।

अनुकूलन के लिए, गैट्सबी के पास उपयोगी प्लगइन्स का एक टन है जो ज्यादातर स्थापित करने के लिए सीधे आगे हैं (खोज के लिए टिप्पणियों से अल्गोलिया तक)। Next.js के पास उनके GitHub रेपो में एक /example निर्देशिका है जो नेक्स्ट के साथ विभिन्न पुस्तकालयों ("प्लगइन्स") का उपयोग करती है। लेकिन मेरे अनुभव में Gatsby के प्लगइन्स का उपयोग करने की तुलना में Next.js उदाहरणों को कॉन्फ़िगर करना कठिन है।

डायनामिक डेटा फ़ेचिंग

हालांकि गैट्सबी स्टैटिकली आउट ऑफ बॉक्स उत्पन्न होता है, गैट्सबी विभिन्न सर्वर एपीआई को गतिशील रूप से के लिए क्वेरी कर सकता है डेटा प्राप्त करें।

Next.js इसी तरह से डायनामिक डेटा फ़ेचिंग कर सकते हैं।

यदि आपको एसएसआर की आवश्यकता है तो आप वर्डप्रेस या कंटेंटफुल ("हेडलेस सीएमएस") जैसे सीएमएस से डेटा का उपभोग करने के लिए गैट्सबी के अंतर्निहित ग्राफक्यूएल एपीआई का उपयोग कर सकते हैं और फिर हर बार जब आप सामग्री प्रकाशित करते हैं तो ऑटो-तैनाती को संभालने के लिए एक वेबहुक (आपके सीएमएस से) का उपयोग कर सकते हैं।

कन्वेंशन बनाम कॉन्फ़िगरेशन

सामान्य तौर पर, गैट्सबी दोनों के बारे में अधिक राय रखते हैं। इसका उल्टा यह है कि आपके पास करने के लिए कम निर्णय हैं। Next.js को उठने और चलने के लिए अधिक कॉन्फ़िगरेशन की आवश्यकता होती है। इसका उल्टा यह है कि आप पर कुछ भी थोपा नहीं गया है।

Next.js कुछ . के साथ "अपने ऐप को जमीन से ऊपर बनाएं" उत्पाद के रूप में अधिक है अच्छी बैटरी शामिल हैं (SSR, रूटिंग, प्रीफ़ेचिंग, कोड-स्प्लिटिंग)।

गैट्सबी अनेक के साथ "आपके शुरुआती बिंदु में वे चीजें शामिल हैं जो आप शायद वैसे भी चाहते हैं" उत्पाद से अधिक है बैटरी शामिल हैं (ग्राफक्यूएल, प्रीफेचिंग, एसएसआर, कोड-स्प्लिटिंग, आलसी लोडिंग, इमेज ट्रांसफॉर्मेशन)।

यदि आपको अपने उत्पाद के हर कोने के लिए विशिष्ट अनुकूलन की आवश्यकता है, तो Next.js दोनों का बेहतर विकल्प है, केवल इसलिए कि यह बॉक्स से अधिक "नंगे" (आपके लिए कम चीजें की जाती है) है।

किसी फ़्रेमवर्क से सुविधाओं को हटाकर प्रोजेक्ट शुरू करना कभी मज़ेदार नहीं होता है, इसलिए यदि आपको ग्राफ़क्यूएल (किसी भी कारण से) पसंद नहीं है तो गैट्सबी आपके लिए नहीं है।

ग्राफ़क्यूएल अभी (एक अच्छे कारण के लिए) सभी प्रचार है जो गैट्सबी के खिलाफ इसे ढांचे का हिस्सा बनाने के खिलाफ बहस करना मुश्किल बनाता है। मैं इसे एक बोनस मानता हूं, लेकिन आपकी प्राथमिकताएं भिन्न हो सकती हैं। यह ध्यान देने योग्य है कि अपोलो (एक ग्राफक्यूएल इंजन) नेक्स्ट.जेएस ऐप्स में सबसे लोकप्रिय परिवर्धन में से एक है।

जहां तक ​​Gatsby इमेज ट्रांसफॉर्मेशन और आपके लिए आलसी लोडिंग को हैंडल करने का सवाल है, जबकि यह माना जाता है कि इससे आपको जो बड़ा परफॉर्मेंस बूस्ट मिलता है, वह शायद आपके लिए यह तय करने के लिए आपको उन्हें माफ कर देगा। लेकिन फिर से, शायद आप छवि परिवर्तनों को अपने तरीके से संभालना चाहते हैं, और उस स्थिति में Next.js बेहतर विकल्प है।

Gatsby vs. Next.js for SEO

चूंकि Gatsby और Next.js दोनों ही आउट-ऑफ-द-बॉक्स प्रदान किए गए सर्वर-साइड हैं, वे दोनों उन वेबसाइटों के लिए उत्कृष्ट विकल्प हैं, जिन्हें बढ़िया SEO (Search Engine Optimization) की आवश्यकता है - जिसका अर्थ है आजकल सभी सार्वजनिक वेबसाइटें।

हालाँकि, एक निश्चित SEO उपयोग-मामला है जहाँ Gatsby की तुलना में Next.js चमकता है:

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

ऐसा कैसे? क्योंकि Next.js आपके अपने सर्वर से गतिशील रूप से सर्वर-साइड सामग्री अपडेट प्रस्तुत कर सकता है, तुरंत जब भी कोई बदलाव होता है।

गैट्सबी के लिए नई सामग्री प्रदर्शित करने के लिए, आपको हर बार अपनी सामग्री में बदलाव होने पर अपने ऐप को फिर से बनाना और फिर से तैनात करना होगा। यह ब्लॉग, ईकामर्स साइटों और अधिकांश अन्य प्रकार की वेबसाइटों के लिए ठीक है, जिन्हें प्रति दिन केवल एक बार या प्रति घंटे में एक बार अपडेट पुश करने की आवश्यकता होती है।

यदि दूसरी ओर आपकी Gatsby साइट आपकी साइट पर अपडेट प्रदर्शित करने के लिए बाहरी API से डेटा प्राप्त कर रही है (उदाहरण के लिए Talkard या Disqus जैसी टिप्पणी सेवा के माध्यम से) तो आप अपनी Gatsby साइट पर रीयल-टाइम सामग्री अपडेट प्राप्त कर सकते हैं - लेकिन आप जीत गए SEO लाभ प्राप्त नहीं करें, क्योंकि अपडेट क्लाइंट-साइड रेंडर किए जाएंगे - सर्वर-साइड रेंडर नहीं किए जाएंगे (जो आप SEO के लिए चाहते हैं)।

सामान्य वास्तविक-विश्व अवलोकन

Gatsby की तुलना में बड़ी साइटों वाली बड़ी कंपनियां Next.js का उपयोग करती हैं। हालांकि गलत विचार नहीं है, रिएक्टजेएस का आधिकारिक दस्तावेज पृष्ठ गैट्सबी का उपयोग करता है। मैंने जो देखा है उसके बारे में मैं बात कर रहा हूं।

Next.js का उपयोग करने वाली बड़ी वेबसाइटें:

• Marvel.com
• नेटफ्लिक्स
• उबर मार्केटप्लेस
• Invisionapp
• सामग्री यूआई

गैट्सबी का उपयोग करने वाली बड़ी वेबसाइट

• रिएक्टजेएस
• MarvelApp.com

हां, दिलचस्प बात यह है कि मार्वल दोनों का उपयोग करता है। वे अपनी मुख्य साइट के लिए Next.js और अपने MarvelApp (एक डिज़ाइन प्लेटफ़ॉर्म) के लिए Gatsby का उपयोग करते हैं।

ब्लॉगिंग के लिए, मैंने केवल कुछ अच्छे Next.js ब्लॉग उदाहरण देखे हैं, लेकिन मैंने Gatsby ब्लॉग के कुछ अच्छे उदाहरण देखे हैं। तानिया रसिया की यह मेरी पसंदीदा में से एक है।

जबकि गैट्सबी यह स्पष्ट करता है कि वे "ब्लॉगर्स के लिए सिर्फ एक और स्थिर साइट जनरेटर" (जेकिल की तरह) के रूप में नहीं दिखना चाहते हैं, यह इस तथ्य को नहीं बदलता है कि यह ब्लॉगिंग के लिए वास्तव में लोकप्रिय है, और कई वर्डप्रेस उपयोगकर्ता आगे बढ़ रहे हैं उस कारण से गैट्सबी (तानिया सहित जिसका मैंने ऊपर उल्लेख किया है)।

Gatsby या Next.js के साथ हेडलेस सीएमएस

बहुत सारे डेवलपर ट्रेंडिंग "हेडलेस सीएमएस" या "डिकूपल्ड सीएमएस" के बारे में बात कर रहे हैं, जहां आप उदा। बैकएंड के रूप में वर्डप्रेस और फिर रेस्ट एपीआई/ग्राफक्यूएल के माध्यम से डेटा का उपभोग करने के लिए रिएक्ट (या एंगुलर/व्यू) का उपयोग करें। नेक्स्ट.जेएस और गैट्सबी दोनों को हेडलेस सीएमएस उत्पादों के लिए फ्रंटएंड ऐप के रूप में इस्तेमाल किया जा सकता है। यह सिद्धांत रूप में बहुत आशाजनक लगता है, लेकिन अभी तक मैंने केवल कुछ अच्छे उदाहरण देखे हैं:

• अगला.js + WordPress Kata.ai द्वारा
• गैट्सबी + वर्डप्रेस चेज़ मैककॉय द्वारा
• Gatsby + WordPress by Indigo Tree
• एडम रशीद द्वारा Gatsby + WordPress

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

हेडलेस सीएमएस अभी भी एक अपेक्षाकृत नई अवधारणा है। इसमें कोई संदेह नहीं है कि हेडलेस सीएमएस सामान्य रूप से (सिर्फ हेडलेस वर्डप्रेस नहीं) 2020 में एक गर्म विषय बनने जा रहा है। और चूंकि Gatsby और Next.js दोनों आपके लिए SSR को संभालते हैं, वे दोनों आपके हेडलेस फ्रंटएंड के रूप में ठोस विकल्प हैं।

Gatsby and Next को परिनियोजित/होस्टिंग करना

चूंकि गैट्सबी तैनाती से पहले स्थिर रूप से उत्पन्न (प्रीबिल्ड) है, यह अपने स्वयं के सर्वर के बिना कहीं भी चल सकता है। आम तौर पर Next.js को चलाने के लिए Node.js सर्वर की आवश्यकता होती है जब तक आपका पूरा ऐप एक स्थिर साइट के रूप में निर्यात किया जाता है, जैसे Gatsby है। (हाँ यह संभव है)। कुछ होस्टिंग समाधान एक के बाद एक के लिए तैयार किए गए हैं।

Gatsby + Netlify

Gatsby और Netlify स्वर्ग में बना मैच है। यदि आपकी साइट सर्वर रहित है, तो Netlify पर Gatsby साइट को परिनियोजित करना सचमुच 30 सेकंड से भी कम समय में कॉन्फ़िगर किया जा सकता है।

यहां से कॉन्टिनियस परिनियोजन को एक git push origin master चलाने के लिए उबाला जा सकता है अपने टर्मिनल में कमांड - अगर आप गैट्सबी के गैट्सबी-प्लगइन-नेटलिफाई प्लगइन का उपयोग करते हैं।

Next.js + Now

Next.js नाओ होस्टिंग सेवा के साथ अच्छी तरह से जुड़ता है, और अच्छे कारण के लिए, Zeit Now (होस्टिंग सेवा) और Next.js (फ्रेमवर्क) दोनों के पीछे की कंपनी है।

Netlify की तरह ही, Now पर परिनियोजन कुछ ही सेकंड में किया जा सकता है, लेकिन यह इस बात पर निर्भर करता है कि आप किस प्रकार का ऐप परिनियोजित कर रहे हैं।

नोट:हालांकि Gatsby और Next.js विशिष्ट होस्टिंग सेवाओं के साथ अच्छी तरह से जुड़ते हैं, आप वास्तव में Netlify पर एक स्थिर/फ्रंटएंड Next.js ऐप होस्ट कर सकते हैं (यहां एक उदाहरण है), और आप Gatsby को Now पर होस्ट कर सकते हैं (यहां एक उदाहरण है)।

दोनों ढांचे को DigitalOcean, Heroku आदि पर होस्ट किया जा सकता है।

यदि आप किसी Next.js या Gatsby ऐप के लिए अपना बैकएंड सर्वर/एपीआई (सर्वर रहित होने के विपरीत) होस्ट करना चाहते हैं तो आप DigitalOcean, Heroku, या Now जैसी किसी चीज़ को देखना चाहेंगे। सावधान रहें कि ("अभी के रूप में") Zeit के अब v2.0, वे अब डॉकर का समर्थन नहीं करते हैं, जो कई डेवलपर्स के लिए एक डीलब्रेकर है।

Next.js बनाम Gatsby परिनियोजन समय

जब आप Gatsby का पुनर्निर्माण और पुन:परिनियोजन करते हैं, तो अपडेट के बीच विलंब होता है। देरी कितनी बड़ी है यह इस बात पर निर्भर करता है कि आपकी साइट कितनी बड़ी है। यह जितना बड़ा होता है, पुनर्निर्माण और पुन:परिनियोजित करने में उतना ही अधिक समय लगता है। मैंने हाल ही में गैट्सबी के साथ इस साइट का निर्माण किया है, और इसके पुनर्निर्माण से लेकर पुनर्नियोजन तक लगभग 2 मिनट लगते हैं, और यह अपेक्षाकृत छोटी साइट है।

Next.js में यह पुनर्निर्माण> पुन:नियोजित> डाउनटाइम समस्या नहीं है। यदि आप अपना बैकएंड सर्वर चलाते हैं, तो आपकी नई सामग्री तुरंत अपडेट हो जाएगी।

यह कोई समस्या नहीं हो सकती है यदि गैट्सबी बिना डाउनटाइम / देरी के वृद्धिशील अपडेट को संभालना आसान बनाता है, लेकिन अभी आपको इसके आसपास एक रास्ता खोजने की आवश्यकता होगी (उदाहरण के लिए वेबसोकेट के साथ)।

संसाधन

• Postlight.com के पास GitHub पर वास्तव में एक दिलचस्प WordPress + Next.js स्टार्टर किट है।
• हेडलेस सीएमएस के लिए, वर्डप्रेस के कुछ ठोस विकल्प प्रिज्मिक, कंटेंटफुल, सैनिटी, घोस्ट और बटरसीएमएस हैं