Obtén información sobre los beneficios y las desventajas de admitir AMP en tu app de Next.js
AMP es un framework de componentes web que mejora los tiempos de carga de las páginas. Next.js tiene compatibilidad integrada con AMP.
¿Qué aprenderás?
En esta guía, primero se describe brevemente cómo AMP garantiza cargas de página rápidas, luego se explican las diferentes formas en que puedes admitir AMP en una app de Next.js y, por último, se te ayuda a decidir qué enfoque es mejor para ti.
Esta guía está dirigida a desarrolladores web que decidieron usar Next.js, pero no están seguros de si deben admitir AMP.
Cómo AMP garantiza cargas de página rápidas
AMP tiene dos estrategias principales para garantizar la velocidad:
- AMP HTML: Es una forma restringida de HTML que hace que ciertas optimizaciones sean obligatorias y prohíbe los patrones de arquitectura que generan lentitud. Consulta Cómo funciona AMP para obtener una descripción general de alto nivel de las optimizaciones y restricciones.
- Caché de AMP: Es una caché de contenido que usan algunos motores de búsqueda, como Google y Bing, que utiliza el procesamiento previo 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 las desventajas de las cachés, y ¿Cómo se almacena en caché mi página de AMP? para comprender cómo se almacenan en caché tus páginas de AMP.
Cómo puedes usar AMP en Next.js
Existen dos formas 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 de AMP te permite hacer que AMP sea la única opción para una página.
Aunque Next.js suele considerarse un framework de React, es importante comprender que, cuando usas Next.js para publicar páginas de AMP, ya no puedes ejecutar componentes de React del lado del cliente porque estos no son componentes de AMP válidos. 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 de AMP híbrido o solo de AMP
Si te preocupa el rendimiento de carga, una página solo de AMP podría ser una buena manera de asegurarte de que tu página se cargue rápido y se mantenga así. Sin embargo, para garantizar la velocidad, AMP prohíbe ciertos patrones de arquitectura y elementos HTML que suelen ralentizar las páginas. Por ejemplo, AMP no permite JavaScript síncrono personalizado porque los recursos que bloquean la renderización son una causa común de cargas de página lentas.
Para comprender si un enfoque solo de AMP es adecuado para ti, debes determinar si todo tu código de frontend se puede representar en AMP HTML:
- Lee Cómo funciona AMP para comprender las restricciones de arquitectura de alto nivel y las optimizaciones obligatorias de AMP.
- Lee Etiquetas HTML para ver qué etiquetas HTML permite y prohíbe AMP, explora el catálogo de componentes de AMP para ver los componentes personalizados que creó la comunidad de AMP para resolver casos de uso comunes y consulta amp-script para aprender a usar JavaScript personalizado para implementar funciones que AMP no admite actualmente.
Incluso si un enfoque solo de AMP no funciona para tu página, puede ser una buena idea usar AMP siempre que sea posible, debido a la velocidad de AMP HTML y las cachés de AMP. El enfoque de AMP híbrido en Next.js proporciona una forma de publicar páginas de AMP de forma condicional. Sin embargo, también genera un costo de mantenimiento más alto, ya que requiere que mantengas dos versiones de cada página.
Conclusión
AMP garantiza que tu sitio se cargue rápido y se mantenga así, ya que aplica patrones que generan velocidad y prohíbe los que generan lentitud. AMP HTML y las cachés de AMP son las dos formas principales en que AMP garantiza la velocidad. Sin embargo, antes de adoptar AMP, debes asegurarte de que pueda admitir todos los requisitos de tu sitio.