Obtén más información sobre los beneficios y las compensaciones de admitir AMP en tu app de Next.js.
AMP es un framework de componentes web que garantiza que las páginas se carguen rápidamente. Next.js tiene compatibilidad integrada con AMP.
¿Qué aprenderás?
En esta guía, se describe brevemente cómo AMP garantiza que las páginas se carguen con rapidez, luego se explican las diferentes formas en que puedes admitir AMP en una app de Next.js y, por último, se te ayudará a decidir qué enfoque es mejor para ti.
El público objetivo de esta guía es un desarrollador web que decidió usar Next.js, pero no está seguro de si admitirá AMP.
Cómo AMP garantiza que las páginas se carguen con rapidez
AMP tiene dos estrategias principales para garantizar la rapidez:
- HTML de AMP: Es una forma restringida de HTML que hace que ciertas optimizaciones sean obligatorias y prohíbe los patrones arquitectónicos que provocan lentitud. Consulta Cómo funciona AMP para obtener una descripción general de las optimizaciones y las restricciones.
- Caché de AMP: Es una caché de contenido que usan algunos motores de búsqueda, como Google y Bing, y que usa renderización previa para acelerar la carga de las páginas. Consulta Por qué existen las cachés de AMP para obtener más información sobre los beneficios y compensaciones de las cachés y ¿Cómo se almacena en caché mi página de AMP? para comprender cómo tus páginas de AMP se almacenan en caché.
Cómo puedes usar AMP en Next.js
Existen dos maneras de usar AMP en Next.js:
- El enfoque de AMP híbrida te permite crear una versión de AMP complementaria de cualquier página de Next.js.
- El enfoque solo AMP te permite hacer que AMP sea la única opción para una página.
Si bien Next.js suele considerarse un framework de React, es importante comprender que, cuando se usa Next.js para publicar páginas de AMP, ya no se pueden ejecutar los componentes de React del cliente, ya que estos no son componentes válidos de AMP. En otras palabras, Next.js ya no es un framework de React, sino un motor de plantillas del servidor para generar páginas de AMP.
Cómo decidir si usar el enfoque híbrido de AMP o solo AMP
Si realmente te interesa el rendimiento de carga, una página solo de AMP puede ser una buena manera de asegurarte de que tu página sea rápida y se mantenga así. Sin embargo, para garantizar la rapidez, AMP prohíbe ciertos patrones arquitectónicos y elementos HTML que, a menudo, conducen a páginas lentas. Por ejemplo, AMP no permite JavaScript síncrono personalizado porque los recursos de bloqueo de procesamiento son una causa común de cargas lentas de página.
Para comprender si un enfoque solo de AMP es adecuado para ti, debes averiguar si todo tu código de frontend puede representarse en HTML de AMP:
- Consulta Cómo funciona AMP para comprender las restricciones arquitectónicas de alto nivel y las optimizaciones obligatorias de AMP.
- Lee las etiquetas HTML para ver las etiquetas HTML que AMP permite y prohíbe, explora el catálogo de componentes de AMP para ver los componentes personalizados que la comunidad de AMP creó para resolver casos de uso comunes y consulta amp-script para obtener información sobre cómo usar JavaScript personalizado para implementar funciones que AMP no admite actualmente.
Incluso si un enfoque de solo AMP no funciona para tu página, de todos modos sería una buena idea usar AMP siempre que sea posible, debido a la rapidez garantizada de HTML de AMP y las cachés de AMP. El enfoque híbrido de AMP en Next.js proporciona una manera de publicar páginas de AMP de manera condicional. Sin embargo, también genera un costo de mantenimiento mayor porque requiere que mantengas dos versiones de cada página.
Conclusión
AMP garantiza que tu sitio se vuelva rápido y se mantenga rápido, ya que aplica patrones que generan rapidez y prohíbe los patrones que llevan a la lentitud. Las cachés de AMP y HTML de AMP son las dos formas principales en que AMP garantiza la rapidez. Sin embargo, antes de adoptar AMP, debes asegurarte de que sea compatible con todos los requisitos de tu sitio.