A jornada do Astro do gerador de site estático ao rival Next.js

Na pesquisa de desenvolvedores mais recente da Netlify, Astro foi o framework web que mais cresceu em uso e satisfação. Embora ainda esteja atrás do Next.js, a estrutura dominante atual, o Astro foi elogiado por sua abordagem mais simples ao desenvolvimento web.

Parte do apelo do Astro é que ele não pretende ser um canivete suíço para desenvolvimento web. Em sua página inicial, o Astro se declara humildemente “a estrutura da web para sites orientados a conteúdo” (embora, de forma menos humilde, o Astro também diga que “alimenta os sites mais rápidos do mundo”).

Site do Astro, março de 2024.

Menos JavaScript

Uma das características de destaque do Astro é que ele não usa tanto JavaScript quanto outros frameworks populares. Ele tem “zero JS, por padrão” – o que significa que os componentes do Astro não são renderizados no cliente, mas “renderizados em HTML no momento da construção ou sob demanda usando renderização no lado do servidor (SSR).”

Mesmo que você não queira abandonar totalmente o JavaScript, muitos desenvolvedores estão adotando uma reduzido Abordagem JavaScript para construção de sites. Em um tutorial para The New Stack, Paul Scanlon explicou como migrou seu site pessoal de uma estrutura React para Astro “com uma pitada de JavaScript”. Isto foi possível graças à arquitetura de “ilhas” do Astro.

A documentação do Astro define uma “ilha” como “qualquer componente de UI interativo na página” e convida os desenvolvedores a pensar em uma ilha como “um widget interativo flutuando em um mar de HTML de outra forma estático, leve e renderizado por servidor”.

O ponto principal é que uma ilha elimina a necessidade, como diz Astro, de “hidratar e renderizar um site inteiro como um grande aplicativo JavaScript (também conhecido como aplicativo de página única, ou SPA)”.

Ilhas também significam menos necessidade de React, a biblioteca JavaScript popular, mas frequentemente usada em demasia. Como Scanlon disse em sua postagem: “React é ótimo, mas é obrigatório em todas as páginas do seu site ou é necessário apenas em algumas “ilhas” ao redor do seu site?”

Astro agora rivaliza com qualquer estrutura web importante

O que os desenvolvedores adoram no Astro é a aparente simplicidade de sua abordagem, mas a cada novo lançamento ele adiciona mais poder. O Astro 3.0, lançado no final de agosto de 2023, contava com otimizações de imagem e suporte para a API View Transitions. O Astro 4.0, lançado em dezembro, apresentava uma nova “barra de ferramentas de desenvolvimento” e vangloriou-se “Construções 80% mais rápidas.”

Em uma apresentação recente na CFE, James Q Quick, desenvolvedor de JavaScript que administra um canal popular no YouTube, apontou que a maioria das pessoas começa a usar o Astro porque ele é conhecido como uma estrutura “static-first” – em outras palavras, é muito bom em gerar páginas HTML estáticas (que são, obviamente, a base de um site de conteúdo). Mas, disse Quick, o Astro pode fazer muito mais.

“O Astro pode fazer quase tudo que estruturas importantes como Next.js e SvelteKit, etc., podem fazer”, disse ele. “É tão poderoso, é tão flexível, é tão simples.”

Site do Astro em maio de 2021, alguns meses antes de seu lançamento.

Em um episódio do Web moderna podcast em janeiro, Quick explicou como Astro era uma espécie de Gatsby da próxima geração. Seu blog pessoal estava anteriormente em Gatsby e ele começou a migrá-lo para Next.js, o framework que ele usava grande parte de seu tempo de trabalho. Mas ao longo do caminho ele experimentou o Astro e logo foi fisgado pela experiência do desenvolvedor. Então ele abandonou o Next.js e mudou seu site para o Astro.

Então, quando o Astro começou a adicionar mais funcionalidades de servidor, para acompanhar o que o Next.js oferecia, Quick ficou ainda mais impressionado.

“Eu adorei a transição deles (Astro) deixando de ser apenas estáticos primeiro, mas realmente acertando essa experiência primeiro (e) depois mudando para o servidor”, disse ele. “Minha aposta é que eles continuarão adicionando recursos e funcionalidades ao servidor, mas farão isso com uma incrível experiência de desenvolvedor em mente, porque provaram isso com todas as outras coisas que fizeram. já feito.”

Eventualmente, diz Quick, o Astro rivalizará com o Next.js em funcionalidade.

Integrações

Outro ponto de venda do Astro são suas integrações com frameworks UI, como React, Vue, Svelte e Solid. Isso significa que você pode trazer componentes que já escreveu em outras estruturas. O Astro também se integra a ferramentas como Tailwind e MDX “com algumas linhas de código”.

“Não sei por que outras estruturas não incluem isso; para as coisas que você fará regularmente, o Astro tem integrações para fazer isso”, disse Quick em sua apresentação CFE. Ele acrescentou que “Next.js realmente não tem isso – eles apenas têm pacotes NPM”.

Scanlon utilizou a integração React no Astro para fazer um formulário de contato interativo para seu site. Mas o resto do site é apenas estático. “Acho que essa abordagem de ativar ou desativar gradativamente o React oferece um bom meio-termo”, escreveu ele, “onde permitirá que você enfrente uma migração sem entrar no mato e refatorar cada componente”.

Melhor para SEO?

A beleza do Astro é que ele fica em algum lugar entre a abordagem do gerador de sites estáticos de estruturas como Eleventy e Hugo, e o mundo JavaScript completo de Next.js, Vue e outros. Você pode adotar uma abordagem HTML e CSS primeiro com o Astro, mas “adicionar” JavaScript (como diz Scanlon) com bastante facilidade no Astro.

O criador do Astro, Fred K. Schott, também sugerido recentemente que quando o Google sair da “métrica notoriamente aceitável (First Input Delay, ou FID) com algo muito mais difícil (Interaction to Next Paint, ou INP)” esse desempenho irá mergulhar para estruturas, especialmente para sites construídos em Nuxt e Next.js .

No final de janeiro, o Google anunciou que o INP “substituirá o FID como parte do Core Web Vitals em 12 de março de 2024”, então descobriremos na próxima semana como os sites Astro se comparam ao Next.js.

Independentemente disso, se você é um desenvolvedor procurando maneiras de reduzir sua dependência de JavaScript, vale a pena conferir o Astro.

A postagem A jornada do Astro do gerador de site estático ao rival Next.js apareceu pela primeira vez em The New Stack.