Ilhas Astro
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.
O que é uma Ilha Astro?
Seção intitulada O que é uma Ilha Astro?O termo “Ilha Astro” se refere a um componente de UI interativo em uma até então página HTML estática. Múltiplas ilhas podem existir em uma página, e uma ilha sempre é renderizada de forma isolada. Pense nelas como as ilhas de um mar de HTML estático e não interativo.
Conteúdo estático como texto, imagens, etc.
Fonte: Arquitetura em Ilhas: Jason Miller
No Astro, você pode utilizar qualquer framework UI suportado (React, Svelte, Vue, etc.) para renderizar ilhas no navegador. Você pode misturar diferentes frameworks em uma mesma página, ou apenas utilizar seu favorito.
A técnica que este padrão arquitetural se baseia é conhecido como hidratação parcial ou seletiva. Astro se aproveita desta técnica nos bastidores, viabilizando suas ilhas automaticamente.
Como Ilhas Funcionam no Astro?
Seção intitulada Como Ilhas Funcionam no Astro?Astro gera todos os websites com zero Javascript no lado do cliente, por padrão. Utilize um componente de UI frontend construído com React, Preact, Svelte, Vue, SolidJS, AlpineJS ou Lit e Astro irá automaticamente renderizá-lo como HTML com antecedência e então remover todo o JavaScript. Isso mantém todos os sites rápidos por padrão através da remoção de todo o JavaScript inutilizado da página.
---// Exemplo: Utilize um componente React estático na página, sem JavaScript.import MeuComponenteReact from '../components/MeuComponenteReact.jsx';---<!-- 100% HTML, Zero JavaScript carregado na página! --><MeuComponenteReact />Porém as vezes, JavaScript no lado do cliente é necessário para criar uma UI interativa. Ao invés de forçar sua página inteira a se tornar uma aplicação JavaScript estilo SPA, Astro te pede para criar uma ilha.
---// Exemplo: Utilize um componente React dinâmico na página.import MeuComponenteReact from '../components/MeuComponenteReact.jsx';---<!-- Este componente agora é interativo na página! O resto do seu website continua estático e com zero JS. --><MeuComponenteReact client:load />Com Ilhas Astro, a maior parte do seu site continua com o leve e puro HTML e CSS. No exemplo acima, você apenas adicionou uma única e isolada ilha de interatividade sem precisar mudar o resto da sua página.
Quais são os benefícios das Ilhas?
Seção intitulada 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!
Learn