Découvrez les avantages et les inconvénients liés à la prise en charge du format 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 d'abord brièvement comment le format AMP garantit un chargement rapide des pages, puis décrit les différentes façons de prendre en charge le format AMP dans une application Next.js. Il vous aide ensuite à choisir l'approche qui vous convient le mieux.
Ce guide est destiné à un développeur Web qui a décidé d'utiliser Next.js, mais ne sait pas s'il est compatible avec le format AMP.
Comment le format AMP garantit un chargement rapide des pages
Les pages AMP ont recours à deux stratégies principales pour garantir la rapidité:
- AMP HTML: forme limitée de code HTML qui rend certaines optimisations obligatoires et qui interdit les modèles architecturaux entraînant des lenteurs. Consultez la page Fonctionnement des pages AMP pour obtenir une présentation générale 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 existe-t-il des caches AMP pour en savoir plus sur leurs avantages et leurs inconvénients ? Consultez également l'article Comment mettre en cache ma page AMP pour comprendre comment vos pages AMP entrent dans les caches.
Utiliser 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 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 ces composants 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.
Déterminer s'il faut utiliser l'approche AMP hybride ou l'approche AMP uniquement
Si vous êtes préoccupé par les performances de chargement, une page AMP uniquement peut être un bon moyen de vous assurer que votre page reste rapide et ne ralentit pas. Mais voici un piège: afin de 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 qui bloquent l'affichage sont une cause fréquente de lenteur du chargement des pages.
Pour savoir si l'approche AMP uniquement est adaptée à vos besoins, vous devez déterminer si tout votre code frontend peut être représenté en AMP HTML:
- Lisez l'article Fonctionnement des pages AMP pour comprendre les restrictions architecturales générales des pages AMP et les optimisations obligatoires.
- Consultez la section Balises HTML pour connaître les balises HTML autorisées et interdites par AMP. Consultez également le catalogue de composants AMP pour voir les composants personnalisés conçus par la communauté AMP pour résoudre les cas d'utilisation courants. Consultez également amp-script pour découvrir comment utiliser du code JavaScript personnalisé afin de mettre en œuvre des fonctionnalités actuellement non compatibles avec AMP.
Même si une approche AMP uniquement ne fonctionne pas pour votre page, il peut être judicieux d'utiliser AMP dans la mesure du possible, en raison de la rapidité garantie de AMP HTML et d'AMP Caches. L'approche AMP hybride de 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
En appliquant des modèles qui favorisent la rapidité et en interdisant les modèles qui entraînent une lenteur, le format AMP garantit que votre site reste rapide et rapide. AMP HTML et AMP Caches sont les deux principaux moyens de garantir la rapidité d'AMP. Avant d'adopter le format AMP, vous devez vous assurer qu'il répond à toutes les exigences de votre site.