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şeni çerçevesidir. Next.js'de yerleşik AMP desteği vardır.
Neler öğreneceksiniz?
Bu kılavuzda öncelikle AMP'nin hızlı sayfa yüklemeyi nasıl garanti ettiği, ardından Next.js uygulamasında AMP'yi desteklemenin farklı yolları açıklanmış, ardından sizin için en iyi yaklaşımın hangisi olduğuna karar vermenize yardımcı olacaktır.
Bu kılavuzun hedef kitlesi, Next.js kullanmaya karar veren ancak AMP'yi destekleyip desteklemediğinden emin olmayan bir web geliştiricisidir.
AMP, sayfaların hızlı yüklenmesini nasıl garanti eder?
AMP, hızı garanti etmek için iki ana stratejiye sahiptir:
- 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. Optimizasyonlar ve kısıtlamalarla ilgili üst düzey bir genel bakış için AMP nasıl çalışır? bölümüne bakın.
- AMP Önbelleği: Google ve Bing gibi bazı arama motorları tarafından kullanılan ve sayfa yükleme işlemini hızlandırmak için önceden oluşturma yönteminden yararlanan bir içerik önbelleği. Önbelleklerin avantajları ve dezavantajları hakkında daha fazla bilgi edinmek için AMP Önbellekleri neden var? bölümüne ve AMP sayfalarınızın önbelleğe nasıl eklendiğini anlamak için AMP sayfam nasıl önbelleğe alınıyor? sayfalarına bakın.
Next.js'de AMP'yi nasıl kullanabilirsiniz?
Next.js'de AMP kullanmanın iki yolu vardır:
- Karma AMP yaklaşımı, herhangi bir Next.js sayfasına eşlik eden AMP sürümü oluşturmanıza olanak tanır.
- Yalnızca AMP yaklaşımı, AMP'yi bir sayfa için tek seçenek yapmanızı sağlar.
Next.js genellikle bir React çerçevesi olarak düşünülse de, AMP sayfalarını sunmak için Next.js'yi kullandığınızda, React bileşenleri geçerli AMP bileşenleri olmadığı için 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ı şablon oluşturma motorudur.
Karma AMP veya yalnızca AMP yaklaşımının kullanılacağına karar verme
Yükleme performansı konusunda ciddiyseniz yalnızca AMP içeren bir sayfa, sayfanızın hızlı olmasını ve hızlı kalmasını sağlamak için iyi bir yol olabilir. Ancak dikkat edilmesi gereken nokta şudur: AMP, hızlılığı garanti etmek için genellikle yavaş sayfalara yönlendiren belirli mimari kalıpları ve HTML öğelerini yasaklar. Örneğin, oluşturmayı engelleyen kaynaklar yavaş sayfa yüklemelerinin yaygın bir nedeni olduğundan AMP, özel eşzamanlı JavaScript'e izin vermez.
Yalnızca AMP yaklaşımının sizin için doğru seçenek olup olmadığını anlamak istiyorsanız ön uç kodunuzun tamamının AMP HTML'de temsil edilip edilemeyeceğini öğrenmeniz gerekir:
- AMP'nin üst düzey mimari kısıtlamalarını ve zorunlu optimizasyonlarını anlamak için AMP nasıl çalışır? konusunu okuyun.
- AMP'nin hangi HTML etiketlerine izin verdiğini ve yasakladığını görmek için HTML Etiketleri'ni okuyun, AMP topluluğunun yaygın kullanım alanlarını çözmek üzere oluşturduğu özel bileşenleri görmek için AMP bileşen kataloğuna göz atın ve AMP'nin şu anda desteklemediği özellikleri uygulamak amacıyla özel JavaScript'i nasıl kullanacağınızı öğrenmek için amp-script dokümanına göz atın.
Yalnızca AMP yaklaşımı sayfanızda çalışmasa bile, AMP HTML ve AMP Önbelleklerinin garantili hızlı olması nedeniyle mümkün olduğunda AMP kullanmak iyi bir fikir olabilir. Next.js'deki Karma AMP yaklaşımı, AMP sayfalarını koşullu olarak yayınlamanın bir yolunu sunar. Bununla birlikte, her sayfanın iki sürümünü yönetmeniz gerektiğinden daha yüksek bir bakım maliyetine neden olur.
Sonuç
AMP, hızlı çalışmaya yol açan kalıpları zorunlu kılarak ve yavaşlığa yol açan kalıpları yasaklayarak sitenizin hızlanmasını ve hızlı kalmasını garanti eder. AMP HTML ve AMP Önbellekleri, AMP'nin hızı garanti ettiği iki temel yöntemdir. Ancak AMP'yi kullanmaya başlamadan önce sitenizin tüm gereksinimlerini destekleyebildiğinden emin olmalısınız.