Découvrez les avantages et les inconvénients liés à la compatibilité des pages 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 le format AMP.
Qu'allez-vous apprendre ?
Ce guide décrit brièvement comment AMP garantit un chargement rapide des pages, puis décrit les différentes manières de prendre en charge le format AMP dans une application Next.js. Il vous aide ensuite à décider de 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 si les pages AMP sont compatibles.
Comment le format AMP garantit-il un chargement rapide des pages ?
L'AMP utilise deux stratégies principales pour garantir la rapidité:
- AMP HTML: forme de code HTML à accès restreint qui rend certaines optimisations obligatoires et interdit les modèles architecturaux qui ralentissent la navigation. Consultez Fonctionnement des pages AMP pour obtenir une vue d'ensemble des optimisations et des restrictions.
- 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 l'article Pourquoi les caches AMP existent pour en savoir plus sur les avantages et les inconvénients de ces caches, et la section Comment ma page AMP est-elle mise en cache ? pour comprendre comment vos pages AMP parviennent dans les caches.
Utiliser le format AMP dans Next.js
Il existe deux façons d'utiliser AMP dans Next.js:
- L'approche AMP hybride vous permet de créer une version AMP associée de n'importe quelle page Next.js.
- L'approche AMP uniquement vous permet de faire du format AMP la seule option disponible 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 les 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 entre l'approche AMP hybride ou l'approche AMP uniquement
Si vous attachez de l'importance aux performances de chargement, une page AMP uniquement peut être un bon moyen de vous assurer que votre page se charge rapidement et ne ralentit pas au fil du temps. Mais pour garantir la rapidité, AMP interdit certains modèles architecturaux et éléments HTML qui ralentissent souvent les pages. Par exemple, AMP n'autorise pas le code JavaScript synchrone personnalisé, car les ressources bloquant l'affichage sont une cause fréquente de lenteur de chargement des pages.
Pour déterminer si l'approche AMP uniquement est adaptée à votre situation, vous devez déterminer si l'intégralité de votre code d'interface peut être représenté dans AMP HTML:
- Lisez l'article Fonctionnement d'AMP pour comprendre les restrictions architecturales de haut niveau et les optimisations obligatoires.
- Consultez la page sur les balises HTML pour connaître les balises HTML autorisées et interdites par le format AMP, parcourez le catalogue de composants AMP pour identifier les composants personnalisés conçus par la communauté AMP pour résoudre des cas d'utilisation courants, et consultez amp-script pour apprendre à utiliser du code JavaScript personnalisé afin d'implémenter des fonctionnalités non compatibles avec AMP.
Même si l'approche AMP uniquement ne convient pas à votre page, il peut être judicieux d'utiliser le format AMP chaque fois que cela est possible, en raison de la rapidité de l'AMP HTML et des caches AMP. L'approche AMP hybride dans Next.js permet de diffuser des pages AMP de manière conditionnelle. Cependant, cela entraîne également des coûts de maintenance plus élevés, car il vous oblige à gérer deux versions de chaque page.
Conclusion
Le format AMP garantit que votre site continue d'être rapide en appliquant des modèles qui conduisent à la vitesse et en interdisant ceux qui entraînent une lenteur. AMP HTML et AMP Cache sont les deux principaux moyens utilisés par AMP pour garantir la rapidité. Mais avant d'adopter les pages AMP, vous devez vous assurer qu'elles répondent à toutes les exigences de votre site.