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