Conheça os benefícios e as desvantagens de oferecer suporte a AMP no seu app Next.js
O AMP é um framework de componentes da Web que garante o carregamento rápido de páginas. O Next.js tem suporte integrado para AMP.
O que você aprenderá?
Este guia descreve brevemente como o AMP garante o carregamento rápido de páginas e, em seguida, explica as diferentes maneiras de oferecer suporte ao AMP em um app Next.js. Por fim, ele ajuda você a decidir qual abordagem é melhor para você.
O público-alvo deste guia é um desenvolvedor da Web que decidiu usar o Next.js, mas não sabe se deve oferecer suporte ao AMP.
Como a AMP garante o carregamento rápido da página
O 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 levam à lentidão. Consulte Como o AMP funciona para ter 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 AMP Caches 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 o AMP no Next.js
Há duas maneiras de usar o AMP no Next.js:
- A abordagem AMP híbrido permite criar uma versão AMP de qualquer página Next.js.
- A abordagem somente AMP permite que você faça com que o AMP seja 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 veicular 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 React, mas um mecanismo de criação de modelos do lado do servidor para gerar páginas AMP.
Como decidir se você vai usar a abordagem híbrida do AMP ou somente do AMP
Se você quer melhorar a performance de carregamento, uma página somente AMP pode ser uma boa maneira de garantir que sua página seja rápida e permaneça assim. Mas aqui está o problema: para garantir a velocidade, o AMP proíbe certos padrões de arquitetura e elementos HTML que geralmente levam a páginas lentas. Por exemplo, o AMP não permite JavaScript síncrono personalizado porque recursos de bloqueio de renderização são uma causa comum de carregamento lento de páginas.
Para entender se uma abordagem exclusiva para AMP é adequada para você, é necessário descobrir se todo o código do front-end pode ser representado em HTML para AMP:
- Leia Como o AMP funciona para entender as restrições de arquitetura e otimizações obrigatórias de alto nível do AMP.
- Leia Tags HTML para saber quais tags HTML o AMP permite e proíbe. Navegue pelo catálogo de componentes do AMP para conferir os componentes personalizados que a comunidade do AMP criou para resolver casos de uso comuns. Além disso, confira amp-script para aprender a usar JavaScript personalizado e implementar recursos que o AMP não oferece no momento.
Mesmo que uma abordagem exclusiva para AMP não funcione para sua página, ainda pode ser uma boa ideia usar o AMP sempre que possível, devido à rapidez garantida do HTML para AMP e dos caches de AMP. A abordagem híbrida do AMP 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 AMP garante que seu site seja rápido e continue assim, 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 maneiras de garantir a rapidez do AMP. No entanto, antes de adotar o AMP, verifique se ele pode atender a todos os requisitos do seu site.