Gatsby बनाम Next.js

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

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

TLDR:

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

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

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

Gatsby और Next.js:

• दोनों बॉक्स से बाहर हाई परफॉरमेंस प्रदान करते हैं।
• दोनों JavaScript फ्रेमवर्क हैं, और दोनों React-आधारित हैं।
• दोनों आपको बॉक्स से बाहर सर्वर-साइड रेंडरिंग (SSR) और क्लाइंट-साइड रेंडरिंग (CSR) देते हैं
• दोनों स्टैटिक साइट जनरेशन (SSG) और डायनामिक साइट जनरेशन (DSG) प्रदान करते हैं।
• दोनों में बॉक्स से बाहर कोड-स्प्लिटिंग और उत्कृष्ट कैशिंग है।
• दोनों पेज डेटा प्रीफेचिंग प्रदान करते हैं। Gatsby यह ऑटोमैटिकली करता है, Next.js में prefetch प्रॉप है जिसे आप उनके Link कंपोनेंट के साथ उपयोग कर सकते हैं (रूटिंग के लिए)।
• दोनों अपने स्वयं के राउटर का उपयोग करके पेजेस के लिए ऑटोमैटिक रूटिंग प्रदान करते हैं (Gatsby Reach Router का उपयोग करता है, Next.js Next.js Router का उपयोग करता है)।
• Gatsby और Next.js दोनों REST API से डेटा प्राप्त कर सकते हैं और उदाहरण के लिए WordPress, Contentful, या Prismic को CMS बैकएंड के रूप में उपयोग कर सकते हैं।

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

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

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

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

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

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

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

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

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

हालांकि Gatsby बॉक्स से बाहर स्टैटिकली जनरेटेड है, Gatsby विभिन्न सर्वर API को क्वेरी करके डेटा को डायनामिकली फेच कर सकता है।

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

यदि आपको SSR चाहिए तो आप Gatsby के बिल्ट-इन GraphQL API का उपयोग करके WordPress या Contentful जैसे CMS से डेटा उपभोग कर सकते हैं ("हेडलेस CMS") और फिर ऑटो-डिप्लॉयमेंट को संभालने के लिए वेबहुक (अपने CMS से) का उपयोग कर सकते हैं हर बार जब आप कंटेंट पब्लिश करते हैं।

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

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

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

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

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

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

GraphQL अभी सभी प्रचार में है (अच्छे कारण के लिए) जो Gatsby के लिए इसे फ्रेमवर्क का हिस्सा बनाने के खिलाफ तर्क देना कठिन बनाता है। मैं इसे एक बोनस मानता हूँ, लेकिन आपकी प्राथमिकताएं भिन्न हो सकती हैं। यह ध्यान देने योग्य है कि Apollo (एक GraphQL इंजन) Next.js ऐप्स में सबसे लोकप्रिय जोड़ में से एक है।

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

SEO के लिए Gatsby बनाम Next.js

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

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

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

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

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

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

सामान्य वास्तविक दुनिया अवलोकन

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

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

• Marvel.com
• Netflix
• Uber Marketplace
• Invisionapp
• Material UI

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

• ReactJS
• MarvelApp.com

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

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

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

Gatsby या Next.js के साथ हेडलेस CMS

बहुत सारे डेवलपर्स ट्रेंडिंग "हेडलेस CMS" या "डिकॉपल्ड CMS" के बारे में बात कर रहे हैं, जहां आप WordPress को बैकएंड के रूप में उपयोग करेंगे और फिर React (या Angular/Vue) का उपयोग करके Rest API/GraphQL के माध्यम से डेटा का उपभोग करेंगे। Next.js और Gatsby दोनों को हेडलेस CMS प्रोडक्ट्स के लिए फ्रंटएंड ऐप के रूप में उपयोग किया जा सकता है। यह सिद्धांत में बहुत आशाजनक लगता है, लेकिन अब तक मैंने केवल कुछ अच्छे उदाहरण देखे हैं:

• Kata.ai द्वारा Next.js + WordPress
• Chase McCoy द्वारा Gatsby + WordPress
• Indigo Tree द्वारा Gatsby + WordPress
• Adam Rasheed द्वारा Gatsby + WordPress

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

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

Gatsby और Next को डिप्लॉय/होस्ट करना

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

Gatsby + Netlify

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

यहां से निरंतर डिप्लॉयमेंट को आपके टर्मिनल में सिंगल git push origin master कमांड चलाने तक सीमित किया जा सकता है — यदि आप Gatsby के gatsby-plugin-netlify प्लगइन का उपयोग करते हैं।

Next.js + Now

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

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

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

दोनों फ्रेमवर्क DigitalOcean, Heroku आदि पर होस्ट किए जा सकते हैं।

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

Next.js बनाम Gatsby डिप्लॉयमेंट समय

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

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

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

संसाधन

• Postlight.com के पास GitHub पर वास्तव में दिलचस्प WordPress + Next.js स्टार्टर किट है।
• हेडलेस CMS के लिए, WordPress के कुछ ठोस विकल्प हैं Prismic, Contentful, Sanity, Ghost और ButterCMS