Padrão de arquitetura de ilhas
Envie HTML predominantemente estático e hidrate apenas widgets interativos para otimizar o tempo até a interatividade.
Padrão de arquitetura de ilhas é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O que é a arquitetura de ilhas?
A arquitetura de ilhas envia principalmente HTML estático com pequenas seções interativas hidratadas de forma independente (ilhas). A maior parte da página não usa JS; somente os componentes que precisam de interatividade se tornam ilhas React.
O problema que ela resolve
A SSR tradicional hidrata a página inteira, mesmo que 90% dela seja conteúdo estático (cabeçalhos, texto e imagens). As ilhas hidratam apenas as partes interativas, reduzindo drasticamente o JavaScript enviado ao navegador.
Conceito central
Pense na página como um mar de HTML estático com ilhas de interatividade flutuando nele. Cada ilha é hidratada de forma independente e pode usar uma estrutura diferente, se necessário.
Astro como estrutura de ilhas
O Astro popularizou a arquitetura de ilhas. Por padrão, os componentes não usam JS. Adicione uma diretiva client:* para optar pela hidratação.
---
import Header from './Header.astro'; // static — 0 JS
import SearchBar from './SearchBar.jsx'; // island — hydrated
import Footer from './Footer.astro'; // static — 0 JS
---
<Header />
<SearchBar client:load /> <!-- hydrate immediately -->
<SearchBar client:idle /> <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />Diretivas de hidratação
As estruturas de ilhas oferecem tempos de hidratação granulares: client:load (imediata), client:idle (requestIdleCallback), client:visible (IntersectionObserver) e client:media (consulta de mídia do CSS).
Implementando ilhas no Next.js
O roteador de aplicações do Next.js aproxima-se das ilhas por meio da divisão entre componentes de servidor e de cliente. Componentes de servidor = estáticos; componentes de cliente = ilhas.
// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
const product = await getProduct();
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Only the interactive button is a Client Component island */}
<AddToCartButton product={product} />
</article>
);
}Ilhas manuais com React lazy
Sem uma estrutura dedicada, obtenha ilhas carregando tardiamente os componentes interativos somente depois que a página for carregada.
const HeavyWidget = lazy(() => import('./HeavyWidget'));
function Page() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setShow(true);
});
obs.observe(containerRef.current);
return () => obs.disconnect();
}, []);
return (
<div ref={containerRef}>
{show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
</div>
);
}Vantagens e desvantagens
Benefícios: JS mínimo, TTI rápido e conteúdo estático armazenado agressivamente em cache. Custos: as ilhas não podem compartilhar estado facilmente (são contextos JS separados), e a arquitetura é mais complexa do que a de uma SPA padrão.
Compartilhando estado entre ilhas
Use mecanismos nativos do navegador (eventos personalizados, URL e localStorage) ou um pequeno armazenamento compartilhado singleton para a comunicação entre ilhas independentes.
// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);
// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));Quando usar a arquitetura de ilhas
É ideal para: sites com muito conteúdo (blogs, comércio eletrônico e marketing) nos quais a maior parte do conteúdo é estática e apenas alguns componentes precisam de interatividade (pesquisa, carrinho e formulários).
Ilhas versus SSR versus SPA
SPA: todo o JS é carregado e tudo é hidratado. SSR: o servidor renderiza e tudo é hidratado. Ilhas: o servidor renderiza tudo, mas somente os componentes interativos são hidratados. As ilhas oferecem melhor desempenho em sites de conteúdo.
Verificação rápida
Qual é o principal benefício de desempenho do padrão de arquitetura de ilhas?
Recapitulação
A arquitetura de ilhas mantém a maior parte do HTML estática (sem JS) e hidrata somente os componentes interativos. Use o Astro como estrutura de ilhas dedicada ou aproxime-se desse modelo com componentes de servidor e de cliente do Next.js. Hidrate de forma tardia as ilhas não críticas com client:visible/IntersectionObserver.
Perguntas Frequentes
A aula “Padrão de arquitetura de ilhas” é grátis?
Sim — o texto completo de “Padrão de arquitetura de ilhas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Padrão de arquitetura de ilhas”?
Envie HTML predominantemente estático e hidrate apenas widgets interativos para otimizar o tempo até a interatividade. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Padrão de arquitetura de ilhas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Como funciona o SSR do React internamente
- Erros de hidratação: causas e correções
- Hidratação seletiva e HTML em fluxo
- Padrão de arquitetura de ilhas