O que é Astro, sua abordagem técnica e como funciona

Até pouco tempo atrás, quando eu montava um site corporativo, o normal para mim — e para quase todo mundo — era recorrer ao WordPress. Por motivos óbvios: é fácil, quase tudo de que você precisa já está desenvolvido e, depois de muitos anos, meu fluxo de trabalho é muito rápido.

Mas no último projeto que desenvolvi, o site da Rondabus, usei Astro. 

O motivo?

Porque ele era recomendado em uma newsletter sobre IA que acompanho, já que, segundo eles, integra-se muito bem com agentes.

E como integra.

Eu encarei o projeto principalmente como um teste do estado atual do desenvolvimento web. Para verificar quanto ainda depende de uma pessoa e quanto já pode ser feito com IA. E foi por isso que usei o framework recomendado.

Obviamente, pesquisei para entender se ele servia para o que eu queria. E dessa pesquisa nasceu este artigo, no qual conto o que você precisa saber para se animar a usá-lo. E mais algumas coisas.

Mas antes de entrar no assunto, duas coisinhas:

A primeira é que fiquei impressionado com a abordagem HTML first. É exatamente o que eu vinha defendendo há anos.

A segunda é que, hoje, para desenvolver um site, tirando o critério, todo o resto pode ser fornecido pelo ChatGPT ou pelo Claude..

Agora sim, vamos começar.

O que é Astro exatamente

Astro é um framework para construir sites, ou seja, um conjunto de ferramentas e diretrizes que ajuda você a gerar o código do seu site.

Nem mais, nem menos.

Existem muitos, cada um com suas particularidades. Neste caso, vou explicar as do Astro.

Astro permite trabalhar com peças reutilizáveis, dados compartilhados e templates. Depois combina tudo para produzir o site.

Ou seja, pense no que você precisa para montar o site de uma empresa: cabeçalho, menu, páginas de serviços, fotos, textos, formulário e rodapé. Você poderia escrever cada página manualmente em HTML, mas repetiria muito trabalho.

Se mudar o telefone, adicionar um item ao menu ou um link no footer, teria de corrigir isso em todos os arquivos do site. Com Astro, não, porque ele reutiliza os elementos.

E você vai me dizer que é como no WordPress. Sim, é verdade, mas aqui não existe um banco de dados por trás.

Você também poderia responder que é como em qualquer linguagem de servidor, como PHP, e eu diria que não é necessário ter nenhuma linguagem instalada no servidor, apenas os arquivos armazenados.

Como se fazia originalmente: um arquivo HTML por URL, com seus CSS e JS associados.

Na verdade, você pode usar HTML, CSS e JavaScript ou TypeScript, mas também pode incorporar componentes de React, Vue ou Svelte se precisar, coisa que eu não faço.

E como se consegue ter elementos reutilizáveis e muitos HTMLs?

A diferença fundamental: gerar o site antes de o usuário chegar

Para entender Astro, vale separar os dois momentos de um site:

1. Quando ele é desenvolvido.
2. Quando alguém o visita.

Em um site dinâmico tradicional, o servidor prepara a página quando recebe uma requisição. Executa código, obtém os dados necessários, coloca tudo em um template e devolve o resultado ao navegador.

O WordPress, por exemplo, funciona assim: PHP executa a aplicação, consulta o banco de dados e usa o tema e os plugins para gerar a página. Sim, o cache permite salvar uma resposta e reutilizá-la, então não é preciso repetir todo o processo em cada visita. O importante é entender que existe uma aplicação capaz de produzir a resposta enquanto o site está funcionando.

No entanto, com Astro você pode fazer esse trabalho antes de publicar. Você prepara as páginas, gera os arquivos e coloca o resultado na hospedagem. É o que se chama de build..

Assim, quando alguém entra na página de contato, o servidor entrega um HTML que já estava pronto. Não precisa reconstruir o cabeçalho, recuperar o telefone e montar o rodapé para aquele visitante.

Essa forma de trabalhar se chama SSG, ou geração de sites estáticos. E tem várias vantagens, como o fato de que os sites criados assim, literalmente, voam..

Há outras que explico no artigo.

O que contei até aqui já serve para você ter uma ideia do que estamos falando, se não for técnico. Se for, daqui em diante vamos nos aprofundar em como o framework funciona.

Café forte para quem gosta de café. Você foi avisado.

Vamos falar de builds

Primeiro, entenda que uma build nada mais é do que o resultado de um processo automatizado que pega todos os arquivos que você escreveu (código, imagens, estilos) e os transforma em um pacote pronto para ser executado pelo servidor ou pelo navegador..

E só.

Ou seja, você tem uma série de arquivos com código que fazem coisas diferentes. Ao executar o comando para compilar a build, Astro identifica as páginas, obtém o conteúdo, executa os templates e prepara os recursos para, no fim, devolver um site estático completo, com seus HTML, CSS e JS (se precisar)..

Por exemplo, você pode ter um template comum e oito fichas de serviços. A build combina o template com os dados de cada ficha e produz as páginas correspondentes.

No Astro, isso é feito com o comando npm run build , que normalmente executa astro build. . O site preparado para publicação fica em uma pasta chamada dist , pronto para ser enviado ao servidor para o qual seu domínio aponta.

Como uma página é construída no Astro

Se você não está acostumado, o vocabulário parece mais complicado do que realmente é. Vamos ver isso com um pequeno site de empresa.

Como é um arquivo .astro

Um arquivo .astro pode combinar uma parte de código com um template parecido com HTML:

—

const titulo = 'Transporte para tu empresa';

—

<h1>{titulo}</h1>

<p>Organizamos los desplazamientos de tu equipo.</p>

O que aparece entre os dois grupos de hífens prepara os dados. Abaixo fica o template que usa esses dados. As chaves indicam onde inserir um valor.

Esse código é executado ao construir o site e o navegador recebe um título normal com seu texto e um parágrafo normal, com o conteúdo da variável titulo.

Componentes

Os elementos que são reutilizados.. 

Por exemplo, o cabeçalho pode ser um componente. O rodapé, outro. Um template para o módulo de hero banner das páginas de serviço, outro. Você os guarda separadamente e os usa nas páginas que precisam deles.

Por exemplo, uma página pode importar Header.astro e Footer.astro e colocar <Header /> no início e <Footer /> no fim. Astro transforma essas peças na marcação HTML correspondente.

Props

As props são os dados que você fornece a um componente para reutilizá-lo com conteúdos diferentes..

Se você criou um componente para o módulo de hero banner das páginas de serviço, pode passar a ele um título, uma descrição e uma imagem. A estrutura mantém o design enquanto os valores mudam. Assim, o módulo hero do serviço 1 pode ser um e o do serviço 2, outro, com conteúdo diferente, mas o mesmo design.

No Astro, o componente pode ler esses valores por meio de Astro.props. 

Layouts e slots

Um layout é uma estrutura compartilhada por várias páginas. Digamos que seja como um componente elevado a outro nível: : um componente costuma ser uma pequena parte da página, enquanto o layout abrange praticamente tudo..

Ele pode incluir o documento HTML, os metadados, o cabeçalho e o rodapé.

O slot é o espaço onde se coloca o conteúdo próprio de cada página. 

Se você vem do WordPress, isso vai lembrar os templates que compartilham cabeçalho e rodapé enquanto o conteúdo principal varia entre URLs. Não funciona exatamente igual, mas cumpre uma função parecida: evitar reconstruir o que é comum toda vez.

Como o Astro organiza as URLs

Astro usa um sistema de rotas baseado em arquivos. Em um projeto simples, a localização de uma página dentro de src/pages determina seu endereço:

Arquivo	Rota
src/pages/index.astro	/
src/pages/contacto.astro	/contacto
src/pages/servicios/bodas.astro	/servicios/bodas

A barra final depende da configuração e da hospedagem, mas a relação básica é essa.

Você não precisa criar manualmente um arquivo diferente para cada artigo ou serviço. Isso permite gerar muitas páginas a partir de um template e de um conjunto de dados, sem copiar o mesmo código repetidas vezes.

Onde o conteúdo fica armazenado se Astro não tem banco de dados

O fato de Astro não exigir um banco de dados significa que os textos e os dados precisam ser armazenados em algum tipo de fonte; você pode escolher qual.

Arquivos, Markdown, JSON e YAML

Em um site pequeno, parte do texto pode ficar nas próprias páginas. Dados compartilhados, como o telefone, é melhor separar para não ter de corrigi-los em vinte lugares.

Um artigo pode ser armazenado em Markdown, um formato de texto com marcações simples para títulos, listas e links. JSON e YAML servem para organizar dados: fichas de serviços, informações de veículos ou textos por idioma, por exemplo.

São formatos diferentes para necessidades diferentes. Você não precisa usar todos nem transformar cada frase do seu site em uma estrutura complicada.

Content Collections

As Content Collections, ou coleções de conteúdo, ajudam a organizar conjuntos de entradas de dados e a definir sua estrutura..

Imagine uma coleção de serviços em que cada ficha precisa ter título, descrição e imagem. Você pode definir essas regras e validar os dados, facilitando a detecção de uma ficha incompleta ou de um valor do tipo errado.

Se você conhece os tipos de conteúdo e os campos personalizados do WordPress, a ideia de organizar fichas vai parecer familiar.

Conteúdo avançado: APIs, CMSs e bancos de dados externos

Embora estejamos gerando sites estáticos, o conteúdo também pode vir de um CMS, uma API ou um banco de dados. Uma API é uma forma de dois sistemas trocarem informações: Astro pede alguns dados e o outro sistema os entrega.

Você pode até usar WordPress como fonte de artigos e construir a parte pública com Astro. Voltaremos a essa combinação em Astro vs WordPress..

A pergunta decisiva é quando você recupera essas informações. Se elas forem incorporadas durante a build, alterá-las na fonte não modifica o HTML publicado até que você o gere novamente. Se forem consultadas durante uma requisição ou pelo navegador, o comportamento é diferente e mais parecido com o das páginas dinâmicas tradicionais.

O que são as Islands do Astro

Uma página pode ter muito conteúdo que você só precisa ler e uma pequena parte com a qual quer interagir. Por exemplo, uma calculadora de orçamento dentro de uma página de serviço. Ou um formulário..

A arquitetura de ilhas permite que esse componente tenha seu próprio comportamento sem transformar a página inteira em uma aplicação executada no navegador.

O que significa hidratar um componente

Hidratar consiste em adicionar o código de um componente interativo a um HTML que já foi gerado, para que ele possa responder às ações do usuário.

A calculadora ou o formulário podem ser exibidos ao carregar a página e depois ativar sua lógica.. 

Aqui estamos falando de ilhas de cliente. Astro também tem ilhas de servidor para resolver partes dinâmicas separadamente, embora não seja necessário entrar nesse assunto para entender esta primeira explicação.

Quando o navegador precisa de JavaScript

Nem toda interação exige uma ilha. Um link funciona com HTML. Um menu suspenso simples pode ser resolvido com HTML e CSS.

Já uma calculadora que atualiza os resultados conforme você muda as opções geralmente precisa de JavaScript. E o formulário precisa de uma integração ou linguagem de servidor para enviar os dados.

E aqui eu adoro a abordagem do Astro: a decisão é tomada pela função que você quer oferecer, não pela ideia batida de que um site moderno precisa carregar uma aplicação inteira..

Astro tenta enviar zero JavaScript por padrão

Atenção para não confundir: estamos falando do site que o usuário vê.. 

Porque Astro usa JavaScript para trabalhar e compilar, mas os componentes .astro não precisam enviar seu código de preparação ao navegador. 

Os scripts que você adicionar, as ilhas que hidratar e as ferramentas externas podem, sim, incorporar JavaScript. Um chat, uma plataforma de analytics (GA4) ou um vídeo incorporado precisam dele.

Portanto, “zero JavaScript por padrão” é o ponto de partida, não uma obrigação.

E, como comento mais abaixo, isso combina muito com o desenvolvimento de sites corporativos, por exemplo.

Astro não precisa ser apenas estático: também pode ser dinâmico ou híbrido

Bem, até agora foquei em apenas uma abordagem, mas existem duas possibilidades.

SSG

O que vimos até agora: a página é gerada antes das visitas, durante a build. 

É perfeito quando o conteúdo pode permanecer igual para todos até a próxima publicação. Ou seja, para páginas que não mudam muito.

SSR

A página é gerada no servidor sob demanda. Ela pode usar informações que não estavam disponíveis durante a build, como dados associados a uma sessão. 

Já não serve qualquer servidor: você precisa de um ambiente de execução compatível e do adaptador correspondente.

Renderização híbrida

Você pode combinar páginas pré-renderizadas e páginas sob demanda. Por exemplo, manter as páginas públicas preparadas e resolver uma área privada no servidor.

Qual é o papel de Node.js e Vite

Node.js permite executar JavaScript fora do navegador. Em um projeto comum de Astro, ele participa do desenvolvimento e da construção da build, onde npm ajuda a gerenciar pacotes e comandos. Em um site estático, Node.js não precisa estar em execução no servidor de produção que hospeda a build.

Vite é um mecanismo usado por muitos frameworks modernos. Faz parte da maquinaria que Astro usa para trabalhar com os arquivos e oferecer o ambiente de desenvolvimento. 

O suficiente para você ter uma ideia.

Como um projeto Astro é organizado

Quando você abrir um projeto, verá pastas que não são páginas e arquivos que não são publicados. Este pequeno mapa vai ajudar a diferenciá-los.

src

Contém o código-fonte: páginas, componentes, layouts e outros arquivos de trabalho. É onde grande parte do site é construída.

public

Contém recursos que são servidos sem o processamento habitual aplicado aos arquivos importados: um robots.txt ou determinadas imagens, por exemplo. Tudo o que você colocar aqui será público, então não é lugar para credenciais.

package.json

Descreve o projeto, suas dependências e seus scripts. É ali que se define o que comandos como npm run build executam. O arquivo de bloqueio de dependências ajuda a manter versões específicas para repetir a instalação.

node_modules

É a pasta onde são instalados os pacotes de que o projeto precisa. Normalmente ela é reconstruída a partir dos arquivos de dependências e não é armazenada inteira no Git.

dist

Contém a saída de produção depois da build. Em um site estático, aqui você encontrará os arquivos preparados para publicar.

O que o navegador e o Google realmente carregam

Vou repetir mais uma vez para quem está na última fileira: o navegador não recebe seu projeto como você o vê no editor. Ele recebe o HTML e os recursos necessários para exibir e usar a página.

Um buscador que solicita essa URL receberá o HTML, tanto se ele tiver sido preparado durante a build quanto se tiver sido gerado no servidor. Isso não garante que será indexado nem que terá um bom posicionamento: conteúdo, links e configurações de rastreamento e indexação continuam importantes, mas, pela minha experiência, é possível otimizar muito, muito bem o que ele recebe.

A ideia que quero que você guarde é esta: todos esses templates, coleções e componentes servem para produzir um site que continua usando as tecnologias de sempre. Astro coordena a criação do site; o HTML resultante é recebido por um navegador.

Conclusão: para que tipo de site Astro faz sentido

Essa forma de trabalhar combina bem com sites cujo conteúdo não muda demais:

• Sites corporativos.
• Portfólios
• Landing pages.

Eu não recomendaria para revistas, blogs e sites em que se cria muito conteúdo ou em que trabalham vários criadores de conteúdo. Para isso, continuo preferindo WordPress ao Astro..

Se você gostou da abordagem e quer saber mais, pode continuar lendo sobre as vantagens e desvantagens do Astro..

E, se preferir colocar tudo isso em prática em um projeto completo, preparei o processo de criar um site de negócio local com IA, usando meu último projeto como exemplo.

Garanto que, depois que você testar, não vai querer voltar atrás.