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