A web moderna evoluiu rapidamente nos últimos anos. Enquanto frameworks Single Page Application (SPA) dominavam os debates com client-side rendering complexo, uma nova onda de ferramentas focadas em desempenho, simplicidade e arquitetura orientada a HTML ganhou força total.
Neste artigo, vou compartilhar a arquitetura adotada neste blog: Astro 5, BunJS, HTMX e Preline UI com Tailwind CSS.
Por que Astro 5?
O Astro se consolidou como uma das melhores soluções para blogs e sites institucionais graças à sua arquitetura de Islands Architecture (Arquitetura de Ilhas) e compilação estática de alto nível (SSG).
- HTML First: Todo o código é compondo e enviado ao cliente como HTML puro por padrão.
- Content Collections estritas: Validação de frontmatter via Zod garante tipagem segura em tempo de compilação.
- Integração nativa: Suporte transparente para Markdown e MDX com realce de código Shiki integrado.
A Velocidade do BunJS
Substituir o Node.js e o npm/pnpm pelo Bun trouxe ganhos imediatos:
- Instalação ultra-rápida: Dependências resolvidas e instaladas em segundos.
- Execução nativa de TypeScript: Sem necessidade de etapas intermediárias de transpilação pesada para utilitários e scripts.
- Compatibilidade total: Integração perfeita com os ecossistemas Astro e Tailwind CSS.
# Instalação rápida de dependências com Bun
bun install
# Servidor de desenvolvimento
bun devInteratividade com HTMX (Sem a complexidade de SPAs)
Em vez de incluir bibliotecas JavaScript pesadas no cliente apenas para fazer buscas dinâmicas ou formulários interativos, usamos o HTMX.
O HTMX permite realizar requisições AJAX, WebSockets e Server-Sent Events diretamente de atributos HTML:
<input
type="text"
name="q"
placeholder="Buscar artigos..."
hx-get="/api/search"
hx-target="#post-list"
hx-trigger="keyup changed delay:300ms"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm"
/>O endpoint /api/search no Astro retorna diretamente um fragmento HTML com as cartas de artigos filtradas, e o HTMX substitui a div #post-list de forma suave.
Design Elegante com Preline UI
Para o visual, combinamos Tailwind CSS com o conjunto de componentes do Preline UI. Isso garante:
- Componentes responsivos prontos para produção (Navbar, Cards, Modals, Drawers).
- Suporte nativo ao modo escuro (Dark Mode).
- Acessibilidade WAI-ARIA pré-configurada.
Conclusão
Esta stack proporciona a combinação ideal: produtividade no desenvolvimento, desempenho impecável nos testes do Lighthouse (Score 100) e facilidade de manutenção publicando artigos via arquivos Markdown versionados no Git.
