Saiba mais sobre as vantagens e desvantagens de ter suporte a AMP no seu app Next.js
A AMP é um framework de componentes da Web que garante o carregamento rápido da página. O Next.js tem compatibilidade integrada com AMP.
O que você aprenderá?
Primeiro, este guia descreve brevemente como a AMP garante o carregamento rápido da página. Em seguida, explica as diferentes maneiras de oferecer suporte a AMP em um app Next.js e ajuda a decidir qual é a melhor abordagem para você.
O público-alvo deste guia é um desenvolvedor da Web que decidiu usar o Next.js, mas não tem certeza se vai oferecer suporte à AMP.
Como a tecnologia AMP garante o carregamento rápido da página
A tecnologia AMP tem duas estratégias principais para garantir a rapidez:
- HTML para AMP: uma forma restrita de HTML que torna certas otimizações obrigatórias e proíbe padrões de arquitetura que causam lentidão. Consulte Como a AMP funciona para uma visão geral de alto nível das otimizações e restrições.
- Cache de AMP: um cache de conteúdo usado por alguns mecanismos de pesquisa, como o Google e o Bing, que utiliza a pré-renderização para acelerar o carregamento de páginas. Consulte Por que há caches de AMP para saber mais sobre as vantagens e desvantagens dos caches e Como minha página AMP é armazenada em cache? para entender como suas páginas AMP chegam aos caches.
Como usar AMP no Next.js
Há duas maneiras de usar AMP no Next.js:
- A abordagem de AMP híbrida permite criar uma versão AMP de acompanhamento de qualquer página do Next.js.
- A abordagem Somente AMP permite que você torne a AMP a única opção para uma página.
Embora o Next.js geralmente seja considerado um framework do React, é importante entender que, quando você usa o Next.js para exibir páginas AMP, não é mais possível executar componentes do React do lado do cliente, porque os componentes do React não são componentes AMP válidos. Em outras palavras, o Next.js não é mais um framework do React, mas um mecanismo de modelos do lado do servidor para gerar páginas AMP.
Como decidir se você deve usar a abordagem de AMP híbrida ou somente AMP
Se você leva a sério o desempenho de carregamento, uma página somente AMP pode ser uma boa maneira de garantir que ela seja rápida e permaneça rápida. No entanto, esta é a dica: para garantir a velocidade, a AMP proíbe determinados padrões de arquitetura e elementos HTML que muitas vezes levam a páginas lentas. Por exemplo, a AMP não permite JavaScript síncrono personalizado porque os recursos de bloqueio de renderização são uma causa comum de carregamentos de página lentos.
Para entender se uma abordagem somente AMP é adequada para você, confira se todo o código de front-end pode ser representado no HTML para AMP:
- Leia Como a AMP funciona para entender as restrições arquitetônicas de alto nível e as otimizações obrigatórias.
- Leia Tags HTML para saber quais tags HTML as AMP permitem e proíbem, navegue pelo catálogo de componentes AMP para ver os componentes personalizados que a comunidade de AMP criou para resolver casos de uso comuns e confira amp-script para aprender a usar JavaScript personalizado e implementar recursos para os quais a AMP não oferece suporte no momento.
Mesmo que uma abordagem somente para AMP não funcione para sua página, ainda pode ser uma boa ideia usar AMP sempre que possível, devido à rapidez garantida do HTML para AMP e dos caches de AMP. A abordagem de AMP híbrida no Next.js oferece uma maneira de veicular páginas AMP condicionalmente. No entanto, isso também cria um custo de manutenção mais alto porque exige que você mantenha duas versões de cada página.
Conclusão
A tecnologia AMP garante que seu site seja rápido e permaneça rápido aplicando padrões que levam à velocidade e proibindo padrões que os levam à lentidão. HTML para AMP e Caches de AMP são as duas principais maneiras pelas quais a AMP garante rapidez. No entanto, antes de adotar AMP, verifique se ela oferece suporte a todos os requisitos do seu site.