Découvrez les avantages et les inconvénients de la prise en charge d'AMP dans votre application Next.js.
AMP est un framework de composants Web qui garantit un chargement rapide des pages. Next.js est compatible avec AMP.
Qu'allez-vous apprendre ?
Ce guide décrit d'abord brièvement comment AMP garantit un chargement rapide des pages, puis explique les différentes façons de prendre en charge AMP dans une application Next.js, puis vous aide à choisir l'approche qui vous convient le mieux.
Ce guide s'adresse aux développeurs Web qui ont décidé d'utiliser Next.js, mais qui ne savent pas s'ils doivent prendre en charge AMP.
Comment AMP garantit-il un chargement de page rapide ?
AMP repose sur deux stratégies principales pour garantir la rapidité:
- AMP HTML: forme restreinte du code HTML qui rend certaines optimisations obligatoires et interdit les modèles architecturaux qui ralentissent le chargement. Pour obtenir une présentation générale des optimisations et des restrictions, consultez Fonctionnement d'AMP.
- AMP Cache: cache de contenu utilisé par certains moteurs de recherche, tels que Google et Bing, qui utilise le préchargement pour accélérer le chargement des pages. Consultez Pourquoi les caches AMP existent-ils ? pour en savoir plus sur les avantages et les inconvénients des caches, et Comment ma page AMP est-elle mise en cache ? pour comprendre comment vos pages AMP sont mises en cache.
Utiliser AMP dans Next.js
Il existe deux façons d'utiliser AMP dans Next.js:
- L'approche Hybrid AMP vous permet de créer une version AMP associée à n'importe quelle page Next.js.
- L'approche AMP uniquement vous permet de définir AMP comme seule option pour une page.
Bien que Next.js soit généralement considéré comme un framework React, il est important de comprendre que lorsque vous utilisez Next.js pour diffuser des pages AMP, vous ne pouvez plus exécuter de composants React côté client, car les composants React ne sont pas des composants AMP valides. En d'autres termes, Next.js n'est plus un framework React, mais un moteur de création de modèles côté serveur permettant de générer des pages AMP.
Choisir d'utiliser l'approche AMP hybride ou AMP uniquement
Si vous accordez de l'importance aux performances de chargement, une page AMP uniquement peut être un bon moyen de vous assurer que votre page est rapide et le reste. Mais voici le hic: pour garantir la rapidité, AMP interdit certains modèles d'architecture et éléments HTML qui ralentissent souvent les pages. Par exemple, AMP n'autorise pas le code JavaScript synchrone personnalisé, car les ressources bloquant le rendu sont une cause courante de chargement lent des pages.
Pour déterminer si une approche AMP uniquement vous convient, vous devez déterminer si tout votre code côté client peut être représenté en AMP HTML:
- Consultez Fonctionnement d'AMP pour comprendre les restrictions architecturales de haut niveau et les optimisations obligatoires d'AMP.
- Consultez Balises HTML pour découvrir les balises HTML autorisées et interdites par AMP, parcourez le catalogue de composants AMP pour découvrir les composants personnalisés créés par la communauté AMP pour résoudre des cas d'utilisation courants, et consultez amp-script pour découvrir comment utiliser JavaScript personnalisé pour implémenter des fonctionnalités actuellement non compatibles avec AMP.
Même si une approche AMP uniquement ne convient pas à votre page, il peut être judicieux d'utiliser AMP dans la mesure du possible, car la rapidité d'AMP HTML et des caches AMP est garantie. L'approche AMP hybride dans Next.js permet de diffuser des pages AMP de manière conditionnelle. Toutefois, cela entraîne également des coûts de maintenance plus élevés, car vous devez gérer deux versions de chaque page.
Conclusion
AMP garantit que votre site est rapide et reste rapide en appliquant des modèles qui accélèrent le chargement et en interdisant les modèles qui ralentissent le chargement. Le format AMP HTML et les caches AMP sont les deux principaux moyens par lesquels AMP garantit la rapidité. Toutefois, avant d'adopter AMP, vous devez vous assurer qu'il peut répondre à toutes les exigences de votre site.