Arquitetura selecionada
Islands Architecture
Islands Architecture renderiza a maior parte da página como HTML estático ou server-rendered e ativa JavaScript apenas em ilhas interativas. É muito usada em sites de conteúdo e experiências com performance crítica.
Estrutura de pastas
Navegue pelos arquivos para ver como a arquitetura aparece no código.
<article>
<product-gallery island />
<static-description />
<add-to-cart island />
</article>Prós
- Reduz JavaScript enviado ao usuário.
- Melhora performance percebida em páginas com muito conteúdo.
- Mantém interatividade apenas onde faz sentido.
Contras
- Não é ideal para aplicações altamente interativas de ponta a ponta.
- Exige framework ou estratégia compatível.
- Compartilhamento de estado entre ilhas pode ficar delicado.
Quando usar
- Sites de conteúdo, e-commerce editorial e landing pages ricas.
- Páginas onde SEO e performance são prioridade.
- Experiências com poucos pontos realmente interativos.
Exemplo real
Uma página de produto com conteúdo estático, galeria interativa e botão de compra hidratado separadamente.
Cenário prático
A descrição, preço e SEO chegam como HTML, enquanto galeria, seletor de variação e botão de compra são ilhas hidratadas sob demanda.
Como implementar
- Identifique quais partes da página realmente precisam de JavaScript.
- Renderize conteúdo estático no servidor ou build.
- Hidrate ilhas por visibilidade, interação ou prioridade da jornada.
Cuidado comum
Usar ilhas em uma aplicação totalmente transacional pode complicar estado compartilhado sem ganho de performance proporcional.