Cómo AMP puede garantizar la rapidez de tu app de Next.js

Obtén más información sobre las ventajas y desventajas de admitir AMP en tu app de Next.js

Houssein Djirdeh

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, primero se describe brevemente cómo AMP garantiza que las páginas se carguen rápidamente. Luego, se explican las diferentes formas en las que puedes admitir AMP en una app de Next.js y, además, 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.

Nota: Esta guía no se redactó para los desarrolladores web que decidieron usar AMP, pero que no saben qué framework utilizar. Sin embargo, señalaremos brevemente que Next.js podría ser una buena opción porque admite el renderización del servidor de AMP y facilita la entrega de contenido de AMP sin introducir mucha complejidad en tu base de código.

Cómo garantiza AMP que las páginas se carguen rápidamente

AMP tiene dos estrategias principales para garantizar la rapidez:

• HTML de AMP: Es un tipo restringido 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 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 usa renderización previa para acelerar la carga de páginas. Consulta Por qué existen las cachés de AMP para obtener más información sobre sus beneficios y desventajas, y ¿Cómo se almacena en caché mi página de AMP? para comprender cómo tus páginas de AMP ingresan a las cachés.

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 usas Next.js para entregar páginas de AMP, ya no puedes ejecutar los componentes de React del lado del cliente, ya que los componentes de React no son 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.

Pruébalo: Consulta Cómo usar AMP en Next.js para probar los dos enfoques por tu cuenta.

Cómo decidir si usar el enfoque híbrido de AMP o solo de 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 rápida. Pero este es el problema: para garantizar la rapidez, AMP prohíbe ciertos patrones arquitectónicos y elementos HTML que suelen llevar a páginas lentas. Por ejemplo, AMP no permite el uso de JavaScript síncrono personalizado porque los recursos de bloqueo del procesamiento son una causa común de que las páginas se carguen con lentitud.

Para comprender si un enfoque exclusivo de AMP es adecuado para ti, debes determinar si todo tu código de frontend se puede representar en HTML de AMP:

• Consulta Cómo funciona AMP para comprender las restricciones arquitectónicas de alto nivel de AMP y las optimizaciones obligatorias.
• Lee las 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 en tu página, puede que sea una buena idea usar AMP siempre que sea posible, debido a la rapidez garantizada del HTML de AMP y las cachés de AMP. El enfoque de AMP híbrido en Next.js proporciona una manera 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 rápido mediante la aplicación de patrones que generan rapidez y la prohibición de patrones que provocan lentitud. HTML de AMP y cachés de AMP son las dos formas principales en que AMP garantiza la rapidez. Sin embargo, antes de adoptar este formato, debes asegurarte de que sea compatible con todos los requisitos de tu sitio.