Arquitetura em Ilhas
O Astro ajudou a ser pioneiro e a popularizar um novo padrão de arquitetura de frontend chamado Arquitetura em Ilhas. A arquitetura em ilhas funciona renderizando a maior parte da sua página em HTML estático e rápido, com pequenas “ilhas” de JavaScript adicionadas quando interatividade ou personalização são necessárias na página (um carrossel de imagens, por exemplo). Isso evita os payloads de JavaScript monolíticos que reduzem a responsividade de muitos outros frameworks web de JavaScript modernos.
Uma breve história
Seção intitulada “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 em que esse padrão arquitetural se baseia também é conhecida 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 conhecida como aplicação 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 têm seu lugar, incluindo incorporadas dentro de uma página Astro (EN). Entretanto, SPAs carecem da habilidade nativa de hidratar de forma seletiva e estratégica, fazendo delas uma escolha excessiva para a maioria dos projetos na web hoje em dia.
O Astro se tornou popular como o primeiro framework web JavaScript popular com hidratação seletiva integrada, utilizando esse mesmo padrão de componentes em ilhas cunhado inicialmente por Sylor-Miller. Desde então, expandimos e evoluímos o trabalho original de Sylor-Miller, o que ajudou a inspirar uma abordagem semelhante de componentes em ilhas para conteúdo renderizado dinamicamente no servidor.
O que é uma ilha?
Seção intitulada “O que é uma ilha?”No Astro, uma ilha é um componente de UI aprimorado em uma página que, fora isso, seria HTML estático.
Uma ilha de cliente é um componente de UI interativo em JavaScript que é hidratado separadamente do resto da página, enquanto uma ilha de servidor é um componente de UI que renderiza seu conteúdo dinâmico no servidor separadamente do resto da página.
Ambas as ilhas executam processos custosos ou mais lentos de forma independente, componente a componente, para carregamentos de página otimizados.
Componentes de ilha
Seção intitulada “Componentes de ilha”Componentes Astro são os blocos de construção do template da sua página. Eles são renderizados para HTML estático sem runtime no lado do cliente.
Pense em uma ilha de cliente como um widget interativo flutuando em um mar de HTML estático, leve e renderizado no servidor. Ilhas de servidor podem ser adicionadas para elementos personalizados ou dinâmicos renderizados no servidor, como a foto de perfil de um visitante autenticado.
Conteúdo estático como texto, imagens, etc.
Fonte: Arquitetura em Ilhas: Jason Miller
Uma ilha sempre executa de forma isolada das outras ilhas na página, e múltiplas ilhas podem existir em uma página. Ilhas de cliente ainda podem compartilhar estado e se comunicar umas com as outras, mesmo que executem em contextos de componentes diferentes.
Essa flexibilidade permite que o Astro suporte múltiplos frameworks de UI como React, Preact, Svelte, Vue e SolidJS. Por serem independentes, você pode até misturar vários frameworks em cada página.
Ilhas de Cliente
Seção intitulada “Ilhas de Cliente”Por padrão, 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 restritivo, mas esse comportamento é o que mantém os sites Astro rápidos por padrão e protege os desenvolvedores de enviar acidentalmente JavaScript desnecessário ou indesejado que possa deixar seu site lento.
Tornar qualquer componente de UI estático em uma ilha interativa requer apenas uma diretiva client:*. O Astro, então, vai fazer o build e empacotar automaticamente seu JavaScript do lado do cliente para uma performance otimizada.
<!-- Este componente agora é interativo na página! O resto do seu site continua estático. --><MeuComponenteReact client:load />Com ilhas, o 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 a um componente para carregar quando o navegador estiver inativo, e client:visible informa a um componente para carregar apenas quando ele entrar na janela de visualização.
Benefícios das ilhas de cliente
O benefício mais óbvio de se construir com Ilhas Astro é a performance: a maior parte do seu website é convertida 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 é o 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”. As duas são carregadas em paralelo e hidratadas de forma isolada, o que significa que o cabeçalho se torna interativo imediatamente sem precisar esperar pelo carrossel, mais pesado, mais abaixo na página.
Melhor ainda, você pode dizer ao Astro exatamente como e quando renderizar cada componente. Se aquele carrossel de imagens é realmente caro de se carregar, você pode adicionar uma diretiva de cliente (EN) especial que diz ao Astro para apenas carregar o carrossel quando ele estiver visível na página. Se o usuário nunca o vir, ele nunca será carregado.
No Astro, cabe a você, como desenvolvedor, dizer explicitamente ao Astro quais componentes na página também precisam ser executados no navegador. O Astro irá hidratar apenas exatamente o que é necessário na página e deixar o resto do seu site como HTML estático.
Ilhas de cliente são o segredo para a história de performance rápida por padrão do Astro!
Ilhas de Servidor
Seção intitulada “Ilhas de Servidor”Ilhas de servidor são uma forma de tirar do caminho do processo de renderização principal o código custoso ou lento do lado do servidor, facilitando combinar HTML estático de alta performance com componentes dinâmicos gerados no servidor.
Adicione a diretiva server:defer (EN) a qualquer componente Astro na sua página para transformá-lo em sua própria ilha de servidor:
---import Avatar from "../components/Avatar.astro";---<Avatar server:defer />Isso divide sua página em áreas menores de conteúdo renderizado no servidor que carregam em paralelo.
O conteúdo principal da sua página pode ser renderizado imediatamente com conteúdo de preenchimento, como um avatar genérico, até que o conteúdo da própria ilha esteja disponível. Com ilhas de servidor, ter pequenos componentes de conteúdo personalizado não atrasa a renderização de uma página que, fora isso, seria estática.
Esse padrão de renderização foi construído para ser portável. Ele não depende de nenhuma infraestrutura de servidor, então funcionará com qualquer host, de um servidor Node.js em um contêiner Docker ao provedor serverless de sua escolha.
Benefícios das ilhas de servidor
Um benefício das ilhas de servidor é a habilidade de renderizar em tempo real as partes mais dinâmicas da sua página. Isso permite que o invólucro externo e o conteúdo principal sejam armazenados em cache de forma mais agressiva, proporcionando uma performance mais rápida.
Outro benefício é proporcionar uma ótima experiência ao visitante. Ilhas de servidor são otimizadas e carregam rapidamente, muitas vezes até antes de o navegador ter pintado a página. Mas no curto tempo que suas ilhas levam para renderizar, você pode exibir conteúdo de fallback personalizado e evitar qualquer deslocamento de layout.
Um exemplo de site que se beneficia das ilhas de servidor do Astro é uma loja de e-commerce. Embora o conteúdo principal das páginas de produto mude com pouca frequência, essas páginas normalmente têm algumas partes dinâmicas:
- O avatar do usuário no cabeçalho.
- Ofertas e promoções especiais para o produto.
- Avaliações de usuários.
Usando ilhas de servidor para esses elementos, seu visitante verá imediatamente a parte mais importante da página: seu produto. Avatares genéricos, indicadores de carregamento e anúncios da loja podem ser exibidos como conteúdo de fallback até que as partes personalizadas estejam disponíveis.