Obtén 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 cargas de páginas rápidas. 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áginas rápidas, luego se explican las diferentes formas en que puedes admitir AMP en una app de Next.js y, luego, te ayuda 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 cargas de página rápidas
AMP tiene dos estrategias principales para garantizar la velocidad:
- HTML de AMP: Es una forma restringida de HTML que hace que ciertas optimizaciones sean obligatorias y prohíbe los patrones arquitectónicos 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 páginas. Consulta Por qué existen las cachés de AMP para obtener más información sobre los beneficios y las compensaciones de las cachés, y ¿Cómo se almacena en caché mi página de AMP? para comprender cómo entran tus páginas de AMP en las cachés.
Cómo puedes usar AMP en Next.js
Existen dos formas de usar AMP en Next.js:
- El enfoque de AMP híbrido te permite crear una versión de AMP complementaria de cualquier página de Next.js.
- El enfoque de solo 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 cliente porque 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 híbrido de AMP o solo AMP
Si te tomas en serio el rendimiento de carga, una página solo de AMP podría ser una buena manera de asegurarte de que tu página sea rápida y se mantenga así. Pero aquí está el problema: para garantizar la velocidad, AMP prohíbe ciertos patrones arquitectónicos y elementos HTML que suelen generar páginas lentas. Por ejemplo, AMP no permite JavaScript síncrono personalizado porque los recursos que bloquean la renderización son una causa común de la carga lenta de las páginas.
Para comprender si un enfoque de solo AMP es adecuado para ti, debes determinar si todo tu código de frontend se puede representar en HTML de AMP:
- Lee Cómo funciona AMP para comprender las restricciones arquitectónicas 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 y, así, implementar funciones que AMP no admite actualmente.
Incluso si un enfoque de solo AMP no funciona para tu página, podría ser una buena idea usar AMP siempre que sea posible, debido a la velocidad garantizada del HTML de AMP 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 sea rápido y se mantenga así, ya que aplica patrones que generan velocidad y prohíbe los que generan lentitud. El HTML de AMP 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.