Arquitetura de ilhas: hidratação seletiva

A Arquitetura de ilhas, termo criado por Jason Miller em 2020, trata uma página web como HTML em sua maior parte estático, com "ilhas" isoladas de interatividade incorporadas a ele. O oceano estático de HTML é enviado ao navegador como está. Somente as ilhas interativas baixam e executam JavaScript, fazendo com que a carga de JavaScript seja proporcional à interatividade real.

Cada ilha é um componente hidratado de forma independente. O servidor renderiza o HTML inicial da ilha junto com o restante da página. Quando o JavaScript da ilha é carregado, ele hidrata somente a subárvore desse componente. O HTML ao redor das ilhas nunca é tocado pelo JavaScript — ele é realmente estático.

Em uma página de publicação de blog com Arquitetura de ilhas, a carga de JavaScript pode ser de 5 KB para uma única ilha de botão de curtir. A mesma página criada como uma aplicação React de página única pode enviar mais de 200 KB de JavaScript para hidratar a página inteira. A abordagem das ilhas torna a carga proporcional à interatividade, e não ao tamanho da página.

O Astro, a principal estrutura de Arquitetura de ilhas, oferece suporte a ilhas criadas com diferentes estruturas na mesma página. É possível ter uma ilha React ao lado de uma ilha Vue e de uma ilha de JavaScript puro. Cada ilha é empacotada de forma independente, portanto os usuários baixam somente o código da estrutura usado pelas ilhas visíveis.

A diretiva client:load hidrata a ilha imediatamente quando a página é carregada. Use-a para ilhas que estejam imediatamente visíveis e interativas, como um menu de navegação ou uma seção principal com um campo de pesquisa. Essa é a estratégia de hidratação de maior prioridade.

A diretiva client:idle espera até que a linha de execução principal do navegador esteja ociosa (depois que o conteúdo essencial for carregado) antes de hidratar a ilha. Ela é ideal para componentes mais abaixo na página ou interações secundárias que não são necessárias imediatamente, como uma barra de compartilhamento em redes sociais.

A diretiva client:visible usa um observador de interseção para hidratar a ilha somente quando ela entra na área visível. Ela é ideal para ilhas localizadas no final da página — uma seção de comentários ou um carrossel de produtos relacionados — que a maioria dos usuários talvez nunca alcance. O JavaScript nem sequer é carregado antes de ser necessário.

A diretiva client:only ignora completamente a renderização no servidor e renderiza a ilha somente no navegador. Isso é necessário para componentes que usam APIs exclusivas do navegador (objeto de janela, objeto de documento) ou que dependem do estado do cliente no momento da montagem. A desvantagem é não haver HTML renderizado pelo servidor para essa ilha.

A Arquitetura de ilhas resolve completamente o problema da hidratação ao garantir que o JavaScript seja carregado e executado somente para componentes genuinamente interativos. Uma publicação de blog com um botão de curtir hidrata apenas a ilha do botão — o texto do artigo de 1.200 palavras, o cabeçalho e o rodapé não geram nenhuma execução de JavaScript no cliente.

Cada ilha tem seu próprio estado isolado. As ilhas não podem compartilhar diretamente o estado do React porque são árvores do React separadas. Isso é intencional: se dois componentes precisarem compartilhar estado, deverão ser combinados em uma única ilha. A comunicação entre ilhas usa parâmetros do endereço, eventos do DOM ou bibliotecas leves de gerenciamento de estado.

Sites migrados de uma aplicação React de página única para a Arquitetura de ilhas, como o site de documentação do Astro, relatam melhorias expressivas: as cargas de JavaScript diminuem de 70% a 90%, o TTI melhora em 2 a 4 segundos em dispositivos móveis e as pontuações de desempenho do Lighthouse saltam de 60 para 90 ou mais. Os ganhos são mais acentuados em páginas com muito conteúdo.

Qual diretiva de hidratação do Astro hidrata um componente somente quando ele rola para dentro da área visível?

A Arquitetura de Ilhas mantém a maior parte da página como HTML estático e hidrata somente componentes interativos isolados. O Astro fornece diretivas de hidratação: client:load (imediatamente), client:idle (após o navegador ficar ocioso), client:visible (ao rolar a página) e client:only (renderização somente no cliente). Cada ilha é hidratada de forma independente, fazendo com que a quantidade de JavaScript seja proporcional à interatividade, e não ao tamanho da página.