Saiba mais sobre as vantagens e desvantagens de oferecer compatibilidade com AMP no seu app Next.js
A AMP é um framework de componentes da Web que garante o carregamento rápido de páginas. O Next.js é compatível com AMP.
O que você aprenderá?
Primeiro, este guia descreve brevemente como a AMP garante o carregamento rápido de páginas, 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 Web que decidiu usar o Next.js, mas não tem certeza se oferecerá suporte a AMP.
Como a AMP garante o carregamento rápido da página
A tecnologia AMP tem duas estratégias principais para garantir a agilidade:
- HTML para AMP: uma forma restrita de HTML que torna determinadas otimizações obrigatórias e proíbe padrões de arquitetura que causam lentidão. Consulte Como as AMP funcionam para ter 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 usa pré-processamento para acelerar os carregamentos de página. Consulte Por que existem 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 são armazenadas em cache.
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 da Next.js.
- A abordagem somente AMP permite fazer com que ela seja 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 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 é melhor usar a abordagem 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. Mas o problema é que, para garantir a agilidade, a tecnologia AMP proíbe determinados padrões de arquitetura e elementos HTML que geralmente resultam em páginas lentas. Por exemplo, as AMP não permitem 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 de AMP é ideal para você, é preciso descobrir se todo o código de front-end pode ser representado em HTML para AMP:
- Leia Como as AMP funcionam para entender as restrições arquitetônicas de alto nível e as otimizações obrigatórias de AMP.
- Leia Tags HTML para saber quais tags HTML as AMP permitem e proíbem, confira o catálogo de componentes AMP para ver os componentes personalizados que a comunidade AMP criou para casos de uso comuns e confira amp-script para saber como usar JavaScript personalizado para implementar recursos que as AMP não oferecem suporte atualmente.
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 à 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, também gera 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 à rápida e impedindo padrões que levam à lentidão. AMP HTML e caches de AMP são as duas principais maneiras de a AMP garantir a agilidade. Mas, antes de adotar a tecnologia AMP, verifique se ela oferece suporte a todos os requisitos do seu site.