Saiba mais sobre os benefícios e as desvantagens de oferecer suporte a AMP no seu app Next.js
AMP é uma estrutura de componentes da Web que melhora o tempo de carregamento da página. O Next.js tem suporte integrado para AMP.
O que você aprenderá?
Este guia descreve brevemente como as AMP garantem carregamentos rápidos de páginas, explica as diferentes maneiras de oferecer suporte a AMP em um app Next.js e ajuda você a decidir qual abordagem é melhor para você.
O público-alvo deste guia é um desenvolvedor Web que decidiu usar o Next.js, mas não tem certeza se deve oferecer suporte a AMP.
Como as AMPs garantem o carregamento de página rápido
A AMP tem duas estratégias principais para garantir a velocidade:
- HTML para AMP: uma forma restrita de HTML que torna obrigatórias algumas otimizações e proíbe padrões de arquitetura que causam lentidão. Consulte Como as AMP funcionam para uma visão geral 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 usa a pré-renderização para acelerar o carregamento de páginas. Consulte Por que os caches de AMP existem para saber mais sobre os benefícios e as desvantagens dos caches e Como minha página AMP é armazenada em cache? para entender como suas páginas AMP entram nos 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 complementar de qualquer página do Next.js.
- A abordagem Somente AMP permite que você torne as páginas AMP a única opção para uma página.
Embora o Next.js seja geralmente considerado um framework do React, é importante entender que, ao usar o Next.js para exibir páginas AMP, não é mais possível executar componentes do React no lado do cliente, porque eles não são componentes AMP válidos. Em outras palavras, o Next.js não é mais um framework do React, mas sim um mecanismo de modelagem do lado do servidor para gerar páginas AMP.
Como decidir entre usar a abordagem 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 sua página seja rápida e permaneça rápida. Mas há um porém: para garantir a velocidade, as AMP proíbem certos padrões de arquitetura e elementos HTML que costumam deixar as páginas lentas. Por exemplo, as AMPs não permitem JavaScript síncrono personalizado porque os recursos de bloqueio de renderização são uma causa comum de carregamento de página lento.
Para entender se uma abordagem somente AMP é adequada para você, é preciso descobrir se todo o código de front-end pode ser representado em HTML para AMP:
- Leia Como as AMPs funcionam para entender as restrições de arquitetura de alto nível e as otimizações obrigatórias das AMPs.
- Leia Tags HTML para saber quais tags HTML são permitidas e proibidas pela AMP, navegue pelo catálogo de componentes AMP para conferir os componentes personalizados que a comunidade da AMP criou para resolver casos de uso comuns e confira amp-script para saber como usar JavaScript personalizado para implementar recursos que a AMP não oferece suporte no momento.
Mesmo que uma abordagem somente de AMP não funcione para sua página, ainda pode ser uma boa ideia usar AMP sempre que possível, devido à velocidade 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 de forma condicional. No entanto, isso também gera um custo de manutenção mais alto, porque exige que você mantenha duas versões de cada página.
Conclusão
O AMP garante que seu site seja rápido e permaneça rápido, aplicando padrões que levam à velocidade e proibindo padrões que levam à lentidão. O HTML para AMP e os caches de AMP são as duas principais formas de garantir a velocidade. Mas antes de adotar as AMPs, verifique se elas atendem a todos os requisitos do seu site.