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