अपने Next.js ऐप्लिकेशन में एएमपी का इस्तेमाल करने के फ़ायदों और नुकसानों के बारे में जानें
एएमपी एक वेब कॉम्पोनेंट फ़्रेमवर्क है. इससे पेज लोड अवधि बेहतर होती है. Next.js में एएमपी के लिए पहले से सहायता मौजूद है.
आपको क्या सीखने को मिलेगा?
इस गाइड में सबसे पहले यह बताया गया है कि एएमपी, पेज को तेज़ी से लोड करने की सुविधा कैसे देता है. इसके बाद, Next.js ऐप्लिकेशन में एएमपी का इस्तेमाल करने के अलग-अलग तरीके बताए गए हैं. इसके बाद, आपके लिए सबसे सही तरीका चुनने में मदद की गई है.
यह गाइड उन वेब डेवलपर के लिए है जिन्होंने Next.js का इस्तेमाल करने का फ़ैसला किया है, लेकिन उन्हें यह नहीं पता कि एएमपी का इस्तेमाल करना चाहिए या नहीं.
एएमपी, पेज लोड होने की स्पीड को कैसे बढ़ाता है
एएमपी के पास स्पीड की गारंटी देने के लिए दो मुख्य रणनीतियां हैं:
- एएमपी एचटीएमएल: यह एचटीएमएल का एक सीमित फ़ॉर्मैट है. इसमें कुछ ऑप्टिमाइज़ेशन ज़रूरी होते हैं. साथ ही, इसमें ऐसे आर्किटेक्चरल पैटर्न का इस्तेमाल नहीं किया जा सकता जिनकी वजह से पेज लोड होने में ज़्यादा समय लगता है. ऑप्टिमाइज़ेशन और पाबंदियों के बारे में खास जानकारी पाने के लिए, एएमपी कैसे काम करता है लेख पढ़ें.
- एएमपी कैश: यह एक कॉन्टेंट कैश है. इसका इस्तेमाल Google और Bing जैसे कुछ सर्च इंजन करते हैं. यह पेज लोड होने की स्पीड बढ़ाने के लिए, प्रीरेंडरिंग का इस्तेमाल करता है. कैश मेमोरी के फ़ायदों और नुकसानों के बारे में ज़्यादा जानने के लिए, एएमपी कैश मेमोरी क्यों मौजूद है देखें. साथ ही, यह समझने के लिए कि आपके एएमपी पेज कैश मेमोरी में कैसे सेव होते हैं, मेरा एएमपी पेज कैश मेमोरी में कैसे सेव होता है? देखें.
Next.js में एएमपी का इस्तेमाल कैसे किया जा सकता है
Next.js में एएमपी का इस्तेमाल करने के दो तरीके हैं:
- हाइब्रिड एएमपी की मदद से, किसी भी Next.js पेज का एएमपी वर्शन बनाया जा सकता है.
- सिर्फ़ एएमपी वाले तरीके से, किसी पेज के लिए एएमपी को ही एकमात्र विकल्प बनाया जा सकता है.
आम तौर पर, Next.js को React फ़्रेमवर्क माना जाता है. हालांकि, यह समझना ज़रूरी है कि एएमपी पेजों को दिखाने के लिए Next.js का इस्तेमाल करने पर, React कॉम्पोनेंट को क्लाइंट-साइड पर नहीं चलाया जा सकता. ऐसा इसलिए, क्योंकि React कॉम्पोनेंट, मान्य एएमपी कॉम्पोनेंट नहीं होते. दूसरे शब्दों में, Next.js अब React फ़्रेमवर्क नहीं है, बल्कि एएमपी पेज जनरेट करने के लिए सर्वर-साइड टेंप्लेट इंजन है.
यह कैसे तय करें कि हाइब्रिड एएमपी या सिर्फ़ एएमपी का इस्तेमाल करना है
अगर आपको पेज लोड होने की परफ़ॉर्मेंस को बेहतर बनाना है, तो सिर्फ़ एएमपी पेज का इस्तेमाल करना एक अच्छा तरीका हो सकता है. इससे यह पक्का किया जा सकता है कि आपका पेज तेज़ी से लोड हो और हमेशा तेज़ी से लोड होता रहे. लेकिन यहां एक बात ध्यान देने वाली है: स्पीड को बनाए रखने के लिए, एएमपी कुछ आर्किटेक्चरल पैटर्न और एचटीएमएल एलिमेंट पर पाबंदी लगाता है. इनकी वजह से, अक्सर पेज लोड होने में ज़्यादा समय लगता है. उदाहरण के लिए, एएमपी में कस्टम सिंक्रोनस JavaScript का इस्तेमाल नहीं किया जा सकता. इसकी वजह यह है कि रेंडर-ब्लॉकिंग रिसॉर्स की वजह से, पेज लोड होने में ज़्यादा समय लगता है.
सिर्फ़ एएमपी का इस्तेमाल करना आपके लिए सही है या नहीं, यह समझने के लिए आपको यह पता लगाना होगा कि आपके सभी फ़्रंटएंड कोड को एएमपी एचटीएमएल में दिखाया जा सकता है या नहीं:
- एएमपी के आर्किटेक्चर से जुड़ी पाबंदियों और ज़रूरी ऑप्टिमाइज़ेशन को समझने के लिए, एएमपी कैसे काम करता है लेख पढ़ें.
- एचटीएमएल टैग लेख पढ़कर जानें कि एएमपी में किन एचटीएमएल टैग का इस्तेमाल किया जा सकता है और किनका नहीं. एएमपी कॉम्पोनेंट कैटलॉग ब्राउज़ करके, उन कस्टम कॉम्पोनेंट को देखें जिन्हें एएमपी कम्यूनिटी ने सामान्य समस्याओं को हल करने के लिए बनाया है. साथ ही, amp-script लेख पढ़कर जानें कि कस्टम JavaScript का इस्तेमाल करके, उन सुविधाओं को कैसे लागू किया जा सकता है जो फ़िलहाल एएमपी में काम नहीं करती हैं.
अगर आपके पेज के लिए सिर्फ़ एएमपी वाला तरीका काम नहीं करता है, तो भी जब भी संभव हो एएमपी का इस्तेमाल करना एक अच्छा आइडिया हो सकता है. ऐसा इसलिए, क्योंकि AMP HTML और एएमपी कैश की स्पीड ज़्यादा होती है. Next.js में हाइब्रिड एएमपी का तरीका, शर्त के हिसाब से एएमपी पेज दिखाने का विकल्प देता है. हालांकि, इससे रखरखाव की लागत भी बढ़ जाती है, क्योंकि आपको हर पेज के दो वर्शन का रखरखाव करना पड़ता है.
नतीजा
एएमपी यह पक्का करता है कि आपकी साइट तेज़ी से लोड हो और हमेशा तेज़ी से लोड होती रहे. इसके लिए, यह उन पैटर्न को लागू करता है जिनसे साइट की स्पीड बढ़ती है. साथ ही, उन पैटर्न पर पाबंदी लगाता है जिनसे साइट की स्पीड कम होती है. एएमपी एचटीएमएल और एएमपी कैश, दो मुख्य तरीके हैं जिनसे एएमपी, स्पीड को पक्का करता है. हालांकि, एएमपी का इस्तेमाल करने से पहले, आपको यह पक्का करना चाहिए कि यह आपकी साइट की सभी ज़रूरी शर्तों को पूरा कर सकता है.