Next.js uygulamanızda AMP'yi desteklemenin avantajları ve dezavantajları hakkında bilgi edinin
AMP, sayfaların hızlı yüklenmesini garanti eden bir web bileşenleri çerçevesidir. Next.js, AMP için yerleşik destek sunar.
Neler öğreneceksiniz?
Bu kılavuzda önce AMP'nin hızlı sayfa yüklemelerini nasıl sağladığı kısaca açıklanır, ardından Next.js uygulamasında AMP'yi destekleyebileceğiniz farklı yöntemler açıklanır ve sizin için en iyi yaklaşımı belirlemenize yardımcı olunur.
Bu kılavuzun hedef kitlesi, Next.js kullanmaya karar vermiş ancak AMP'yi destekleyip desteklemeyeceğinden emin olmayan web geliştiricileridir.
AMP, sayfaların hızlı yüklenmesini nasıl sağlar?
AMP'nin hızı garanti etmek için iki ana stratejisi vardır:
- AMP HTML: Belirli optimizasyonları zorunlu kılan ve yavaşlığa yol açan mimari kalıpları yasaklayan kısıtlanmış bir HTML biçimidir. Optimizasyonlara ve kısıtlamalara genel bir bakış için AMP'nin işleyiş şekli başlıklı makaleyi inceleyin.
- AMP Önbelleği: Google ve Bing gibi bazı arama motorları tarafından kullanılan, sayfa yüklemelerini hızlandırmak için ön oluşturma özelliğini kullanan bir içerik önbelleğidir. Önbellekleri kullanmanın avantajları ve dezavantajları hakkında daha fazla bilgi edinmek için AMP önbellekleri neden kullanılır? başlıklı makaleyi inceleyin. AMP sayfalarınızın önbelleğe nasıl alındığını öğrenmek için AMP sayfam nasıl önbelleğe alınır? başlıklı makaleyi inceleyin.
AMP'yi Next.js'de kullanma
AMP'yi Next.js'de kullanmanın iki yolu vardır:
- Karma AMP yaklaşımı, herhangi bir Next.js sayfasının eşlik eden AMP sürümünü oluşturmanıza olanak tanır.
- Yalnızca AMP yaklaşımı, bir sayfa için AMP'yi tek seçenek haline getirmenize olanak tanır.
Next.js genellikle bir React çerçevesi olarak düşünülse de AMP sayfaları yayınlamak için Next.js'i kullandığınızda React bileşenleri geçerli AMP bileşenleri olmadığından artık React bileşenlerini istemci tarafında çalıştıramayacağınızı anlamanız önemlidir. Diğer bir deyişle, Next.js artık bir React çerçevesi değil, AMP sayfaları oluşturmak için sunucu tarafı bir şablon motorudur.
Karma AMP mi yoksa yalnızca AMP mi yaklaşımını kullanacağınıza karar verme
Yükleme performansı konusunda ciddiyseniz yalnızca AMP sayfası kullanmak, sayfanızı hızlı hale getirmenin ve bu hızı korumanın iyi bir yolu olabilir. Ancak burada bir sorun var: AMP, hızı garanti etmek için genellikle yavaş sayfalara yol açan belirli mimari kalıpları ve HTML öğelerini yasaklar. Örneğin, AMP, oluşturma işlemini engelleyen kaynaklar sayfaların yavaş yüklenmesinin yaygın bir nedeni olduğundan özel senkronize JavaScript'e izin vermez.
Yalnızca AMP yaklaşımının sizin için uygun olup olmadığını anlamak amacıyla, ön uç kodunuzun tamamının AMP HTML'de temsil edilip edilemeyeceğini belirlemeniz gerekir:
- AMP'nin üst düzey mimari kısıtlamalarını ve zorunlu optimizasyonlarını anlamak için AMP'nin işleyiş şekli başlıklı makaleyi okuyun.
- AMP'nin hangi HTML etiketlerine izin verdiğini ve hangilerini yasakladığını görmek için HTML Etiketleri başlıklı makaleyi okuyun, AMP topluluğunun yaygın kullanım alanlarını çözmek için oluşturduğu özel bileşenleri görmek üzere AMP bileşen kataloğuna göz atın ve AMP'nin şu anda desteklemediği özellikleri uygulamak için özel JavaScript'i nasıl kullanacağınızı öğrenmek üzere amp-script sayfasına göz atın.
Sayfanız için yalnızca AMP yaklaşımı işe yaramasa bile AMP HTML ve AMP önbellekleri hızlı olduğu için mümkün olduğunda AMP'yi kullanmak iyi bir fikir olabilir. Next.js'deki karma AMP yaklaşımı, AMP sayfalarını koşullu olarak yayınlamanın bir yolunu sağlar. Ancak her sayfanın iki sürümünü de yönetmenizi gerektirdiğinden daha yüksek bir bakım maliyeti de oluşturur.
Sonuç
AMP, hızlılığa yol açan kalıpları zorunlu kılarak ve yavaşlığa yol açan kalıpları yasaklayarak sitenizin hızlı olmasını ve hızlı kalmasını sağlar. AMP HTML ve AMP önbellekleri, AMP'nin hızı garanti etmesinin iki ana yoludur. Ancak AMP'yi kullanmaya başlamadan önce AMP'nin sitenizin tüm şartlarını karşılayabileceğinden emin olmanız gerekir.