Astro o framework web para sites estáticos
Vinícius Victorino Frameworks

Astro o framework web para sites estáticos

Astro é um framework moderno, simples e poderoso, que provém uma excelente experiencia de desenvolvimento.

Introdução

Astro é um framework de código aberto criado por Fred Schott e Nate Moore. Cujo foco é facilitar a criação de sites estáticos, sem comprometer a experiência de desenvolvimento e reaproveitando conhecimentos de outras frameworks.

Astro renderiza seu site inteiro para HTML estático durante a construção. O resultado é um website completamente estático com todo o JavaScript removido da página final. Sem a necessidade de uma aplicação JavaScript monolítica, só HTML estático que carrega o mais rápido possível no navegador não importando quantos componentes UI foram usados para gerá-lo. (Fred Schott e Nate Moore, 2021)

Ilhas de Componente

É uma arquitetura Frontend que consiste em renderizar html no servidor (SSR) e pré definir escopos (Ilhas), para injetar JavaScript. Isso é interessante porque hoje a hidratação, que é esse processo de tornar interativo o HTML gerado no servidor, é extremamente custoso e acontece para a página inteira.

Ilhas Astro (ou Ilhas de Componente) é um padrão de arquitetura web em que Astro é pioneiro. A ideia de “arquitetura em ilhas” foi criada em 2019 pela arquiteta frontend da Etsy, Katie Sylor-Miller e expandido nesta postagem pelo criador do Preact, Jason Miller.

As ilhas vem como uma solução para a execução da hidratação parcial. E ela corre basicamente definindo diretivas nos componentes para declará-los como interativos.

Abaixo um exemplo modesto em que eu estou usando um componente React para trocar a cor do botão, todos são o mesmo componente, mas apenas um deles está sendo hidratado:

Sintaxe

Para atingir esse resultado, como dito acima, o Astro usa diretivas, mas isso não é a única inovação proposta. Seguindo a proposta de frameworks estáticas como o Gatsby, ele prove uma maneira de viabilizar a geração estática de sites (SSG) e faz isso introduzindo uma nova sintaxe.

Basicamente ela é um amalgama de html/mdx/vue/svelte com pitadas de PHP a gosto. Tudo que acontece entre a barra tripla ”---” só acontece em tempo de compilação. Isso permite a clara distinção entre cliente e servidor delegando, o que em um SPA seria executado no cliente, para o servidor.

Executando expressões

---
import x from 'x';


const y = x();
---


<div>
  {y}
</div>

Acessando o sistema de arquivos

---
import { Post } from '../components/Post.astro';


const posts = await Astro.glob('../pages/**/posts/**/*.mdx');
---


<div>
  {posts.map((post) => <Post {...post} />)}
</div>

Consumindo de uma API

---
const resposta = await fetch('https://cms/api/posts');
const posts = await resposta.json();
---


<div>
  {posts.map((post) => <Post {...post} />)}
</div>

Componentização

Layouts

Além da barra tripla os componentes do Astro permitem a criação de layouts com html, que no React por exemplo exige o uso de libs como o react-helmet:

<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta
      content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"
      name="viewport"
    />
  </head>


  <body>
    <slot />
  </body>
</html>

Os layouts podem ser reaproveitados tanto dentro de outros componentes quanto dentro dos arquivos Markdown:

---
layout: "./Layout.astro"
---

Estilização

Assim como Svelte e Vue o Astro permite a estilização, seja em escopo ou global, direto dentro dos componentes.

<button class="button">Button</button>
<style>
  .button {
    cursor: pointer;
  }
</style>
<style is:global>
  * {
    box-sizing: border-box;
  }
</style>

Props

Não seria um componente se não houvesse como receber e exigir props. Os componentes do Astro usam o atributo props da variável Astro para acessar os valores das props.

---
export interface Props {
  name: string;
  msg?: string;
}
const { msg = 'Olá', name } = Astro.props;
---


<h2>{msg}, {name}!</h2>

UI agnóstica

Mas você do pode dizer “eu não quero refazer todos os meus componentes” e é ai que o Astro brilha. Ele te permite adicionar integrações com múltiplas frameworks como:

  • React
  • Vue
  • Svelte
  • Solid
  • Preact
  • …

E graças a arquitetura de ilhas de componente você pode escolher se é um componente interativo ou não através das diretivas de template.

---
import { DemoButton } from './DemoButton';
---


<section class="islands-scheme">
  <header><DemoButton /></header>
  <aside><DemoButton /></aside>
  <main><DemoButton client:only="react" /></main>
  <footer><DemoButton /></footer>
</section>

Experiência de desenvolvimento

Esse site foi feito usando o Astro, e é incrível como foi simples começar. Ele tem uma config familiar, construída e cima da do vitejs, foi para a maior parte, só procurar as integrações que eu queria e componentizar.

Eu só tive dificuldade com o setup do mermaidjs, mas como a sintaxe dos componentes Astro é html válido eu consegui fazer uma solução funcional, mas ia ser interessante ter esse suporte junto do markdown igual no github/gitlab, talvez com uma geração estática do svg.

Update eu consegui fazer isso com um componente Astro usando mermaid-parse.
(20/10/2022)

Mas a experiência como um todo foi excelente e as soluções propostas para gerenciamento do sistema de arquivos e velocidade de execução fizeram o Gatsby parecer bem defasado e complicado.