Next.js uygulamanızda AMP'yi desteklemenin avantajları ve dezavantajları hakkında bilgi edinin
AMP, hızlı sayfa yüklemelerini garanti eden bir web bileşeni çerçevesidir. Next.js, AMP için yerleşik desteğe sahiptir.
Neler öğreneceksiniz?
Bu kılavuzda öncelikle AMP'nin hızlı sayfa yüklemelerini nasıl garanti ettiği, ardından Next.js uygulamasında AMP'yi desteklemenin farklı yolları açıklanmaktadır. Ardından, sizin için en iyi yaklaşımın hangisi olduğuna karar vermenize yardımcı olur.
Bu kılavuzun hedef kitlesi, Next.js'yi 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'nin, hızı garantilemek için iki ana stratejisi vardır:
- AMP HTML: Belirli optimizasyonları zorunlu kılan ve yavaşlığa neden olan 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'nin işleyiş şekli konusuna bakın.
- AMP Önbelleği: Sayfa yüklemelerini hızlandırmak için önceden oluşturma işleminden yararlanan Google ve Bing gibi bazı arama motorları tarafından kullanılan 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 önbelleklere nasıl girdiğini anlamak için AMP sayfam nasıl önbelleğe alınır? bölümüne bakın.
Next.js'de AMP'yi nasıl kullanabilirsiniz?
Next.js'de AMP'yi 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ı, AMP'yi bir sayfa için tek seçenek haline getirmenize olanak tanır.
Next.js genellikle bir React çerçevesi olarak düşünülse de, AMP sayfalarını sunmak için Next.js 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ı unutmayın. Diğer bir deyişle Next.js artık bir Tepki çerçevesi değil, AMP sayfaları oluşturmak için kullanılan bir sunucu tarafı şablon oluşturma motorudur.
Karma AMP veya yalnızca AMP yaklaşımının mı kullanılacağına karar verme
Yükleme performansını artırma 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 şu önemli noktaya dikkat edin: AMP, hızı garanti etmek için genellikle yavaş sayfalara yol açan belirli mimari kalıpları ve HTML öğelerini yasaklar. Örneğin, yavaş sayfa yüklemelerinin yaygın bir nedeni oluşturmayı engelleyen kaynaklar olduğundan AMP özel eşzamanlı JavaScript'e izin vermez.
Yalnızca AMP yaklaşımının size uygun olup olmadığını anlamak için ön uç kodunuzun tamamının AMP HTML'de temsil edilip edilemeyeceğini tespit etmeniz gerekir:
- AMP'nin üst düzey mimari kısıtlamalarını ve zorunlu optimizasyonlarını anlamak için AMP'nin işleyiş şekli bölümünü okuyun.
- AMP'nin hangi HTML etiketlerine izin verdiğini ve hangi etiketleri yasakladığını öğrenmek için HTML Etiketleri'ni okuyun, AMP topluluğunun yaygın kullanım alanlarını çözmek amacıyla oluşturduğu özel bileşenleri görmek için AMP bileşeni kataloğuna göz atın ve AMP'nin şu anda desteklemediği özellikleri uygulamak üzere özel JavaScript'in nasıl kullanılacağını öğrenmek için amp-script öğesine göz atın.
Yalnızca AMP yaklaşımı sayfanızda işe yaramasa bile, AMP HTML ve AMP Önbelleklerin garantili hızlılığı nedeniyle mümkün olduğunda AMP kullanmak yine de iyi bir fikir olabilir. Next.js'deki Karma AMP yaklaşımı, AMP sayfalarını koşullu olarak sunmak için bir yol sağlar. Ancak, bu yöntem aynı zamanda, her sayfanın iki sürümünü yönetmenizi gerektirdiğinden daha yüksek bir bakım maliyetine neden olur.
Sonuç
AMP, hıza yol açan kalıpları uygulayarak ve yavaşlığa yol açan kalıpları yasaklayarak sitenizin hızlı olmasını ve hızlı kalmasını garanti eder. AMP HTML ve AMP Önbellekleri, AMP'nin hızı garanti ettiği iki ana yöntemdir. Ancak AMP'yi kullanmaya başlamadan önce, sitenizin tüm gereksinimlerini destekleyebildiğinden emin olmalısınız.