Neste vídeo e artigo prático, exploramos a combinação moderna entre o Astro (para renderização rápida de conteúdo e suporte a ilhas de arquitetura), o Bun (como runtime ultrarrápido) e o HTMX (para interatividade reativa orientada a hipertexto diretamente do servidor).
Assista à explicação completa no vídeo incorporado acima e confira abaixo o resumo dos principais tópicos abordados.
Por que essa combinação tecnológica?
O ecossistema JavaScript tradicionalmente adotou Single Page Applications (SPAs) para quase qualquer caso de uso. No entanto, para portais de conteúdo, blogs corporativos e documentação técnica, essa abordagem traz custos excessivos de hidratação, JavaScript no cliente e complexidade de estado.
A tríade Astro + Bun + HTMX resolve esse dilema:
- Astro: Gera HTML puro por padrão (zero JS inicial), com excelente SEO, Core Web Vitals impecáveis e geração estática ou sob demanda.
- Bun: Oferece inicialização instantânea, gerenciamento de pacotes até 30x mais veloz que npm, e execução eficiente de scripts TypeScript.
- HTMX: Permite buscas instantâneas, filtros dinâmicos de categorias e paginação assíncrona por meio de simples atributos HTML (
hx-get,hx-target,hx-swap), dispensando frameworks pesados no cliente.
Principais Tópicos do Vídeo
- 00:00 - Introdução ao dilema dos frameworks SPA modernos.
- 02:15 - Configurando o Astro com o adaptador do Cloudflare e runtime Bun.
- 06:40 - Implementando busca instantânea e filtros por categoria com HTMX.
- 11:20 - Otimização de Web Vitals (LCP, CLS, INP) com ilhas de carregamento inteligente.
- 16:00 - Conclusão e melhores práticas de deploy.
Exemplo Prático: Busca Reativa com HTMX
Veja como criamos um input de busca que atualiza a listagem de posts sem recarregar a página e sem uma linha sequer de JavaScript complexo:
<input
type="text"
name="q"
placeholder="Pesquisar..."
hx-get="/api/search"
hx-target="#results-container"
hx-trigger="keyup changed delay:300ms, search"
/>
<div id="results-container">
<!-- Resultados renderizados no servidor -->
</div>Com apenas esses atributos, o navegador dispara a requisição de busca respeitando um debounce de 300ms e substitui o conteúdo do contêiner com segurança e velocidade.
