Ilhas Astro

Astro foi pioneiro e também popularizou uma arquitetura de frontend chamadas Ilhas. Arquitetura em ilhas resulta em melhor performance no frontend por lhe ajudar a evitar padrões de JavaScript monolíticos e por remover todo o JavaScript não essencial de uma página automaticamente. Desenvolvedores continuam usando seus componente e frameworks de UI favoritos com Astro e ainda recebem esses benefícios.

Uma breve história

O termo “componente em ilhas” (component island) foi cunhado inicialmente pela arquiteta de frontend da Etsy, Katie Sylor-Miller, em 2019. Essa ideia foi então ampliada e documentada nesta postagem pelo criador do Preact, Jason Miller, em 11 de Agosto de 2020.

A ideia geral de uma arquitetura em “Ilhas” é enganosamente simples: renderizar páginas HTML no servidor, e injetar espaços reservados ou slots ao redor de regiões altamente dinâmicas […] que podem, então, ser “hidratadas” no cliente em widgets pequenos e autônomos, reutilizando o HTML inicial deles renderizado no servidor.
— Jason Miller, Criador do Preact

A técnica que esse padrão arquitetural se baseia também é conhecido como hidratação parcial ou seletiva.

Em contraste, a maioria dos frameworks web baseados em JavaScript hidratam e renderizam um website inteiro como uma grande aplicação JavaScript (também conhecidas como aplicações de página única, ou SPA). SPAs oferecem simplicidade e poder, mas sofrem de problemas de performance no carregamento da página por causa do uso pesado de JavaScript no lado do cliente.

As SPAs tem seu lugar, incluindo embedadas dentro de uma página Astro (EN). Entretanto, SPAs carecem da habilidade nativa de hidratar de forma selecionada e estratégica, fazendo delas escolhas excessivas para a maioria dos projetos na web hoje em dia.

Astro se tornou popular como o primeiro framework web JavaScript popular com hidratação seletiva integrada, utilizando esse padrão de componentes em ilhas cunhado por Sylor-Miller.

O que é uma ilha?

No Astro, uma “ilha” se refere a qualquer componente de UI interativo em uma página. Pense em uma ilha como um widget interativo flutuando em um mar de HTML stático, leve e renderizado no servidor.

Conteúdo estático como texto, imagens, etc.

Carrossel de imagens (ilha interativa)

Fonte: Arquitetura em Ilhas: Jason Miller

Uma ilha sempre executa de forma isolada de outras ilhas na página, e múltiplas ilhas podem existir em uma página. Ilhas ainda assim podem compartilhar estado e se comunicarem umas com as outras, apesar de executarem em contextos de componentes diferentes.

Essa flexibilidade permite que Astro suporte múltiplos frameworks de UI como React, Preact, Svelte, Vue, e SolidJS. Por serem independentes, você pode até misturar múltiplos frameworks em cada página.

Criando uma ilha

Por padrão, Astro vai renderizar automaticamente todos os componentes de UI para apenas HTML e CSS, removendo todo o JavaScript do lado do cliente automaticamente.

<MeuComponenteReact />

Isso pode soar restrito, mas esse comportamento é o o que mantém websites Astro rápidos por padrão e proteje desenvolvedores de acidentalmente enviar JavaScript desnecessário ou indesejado que pode tornar seu website lento.

Tornar qualquer componente de UI estático em uma ilha interativa requer apenas uma diretiva client:*. Astro, então, vai fazer um build automaticamente e empacotar seu JavaScript do lado do cliente para uma performance otimizada.

<!-- Este componente agora é interativo na página!
     O resto do seu website continua estático. -->
<MeuComponenteReact client:load />

Com ilhas, JavaScript do lado do cliente só é carregado para os componentes explicitamente interativos que você demarcar utilizando diretivas client:*.

E por causa das interações serem definidas a nível de componente, você pode lidar com diferentes prioridades de carregamento para cada componente baseado em seu uso. Por exemplo, client:idle informa um componente para carregar quando o navegador estiver inativo, e client:visible informa um componente para carregar apenas quando ele entrar na janela de visualização.

Quais são os benefícios das Ilhas?

O mais óbvio benefício de se construir com Ilhas Astro é performance: a maior parte do seu website é convertido em HTML estático e rápido, carregando JavaScript apenas para os componentes individuais que o necessitam. JavaScript é um dos assets mais lentos que você pode carregar por byte, então cada byte conta.

Outro benefício é carregamento paralelo. Na ilustração de exemplo acima, a ilha de baixa prioridade “carrossel de imagens” não precisa bloquear a ilha de alta prioridade “cabeçalho”. Os dois são carregados em paralelo e hidratados de forma isolada, o que significa que o cabeçalho se torna interativo imediatamente sem precisar esperar que o carrossel, mais pesado, desacelere o carregamento da página.

Melhor ainda, você pode dizer para o Astro exatamente como e quando renderizar cada componente. Se o carrossel de imagens é realmente caro de se carregar, você pode adicionar uma diretiva de cliente especial que diz ao Astro para apenas carregar o carrossel de imagens quando ele estiver visível na página. Se o usuário nunca o ver, ele nunca será carregado.

No Astro, cabe a você como desenvolvedor explicitamente dizer ao Astro quais componentes na página também precisam ser executados no navegador. Astro irá apenas hidratar exatamente o que é necessário na página e deixar o resto do seu website como HTML estático.

Ilhas são o segredo para a história de performance rápida por padrão do Astro!

Contribua

Comunidade