📖
Core

Hydration

Processo de attachar event listeners do React ao HTML pré-gerado pelo servidor.

📚 O que é

SSR gera HTML estático. Browser recebe e exibe imediatamente (rápido). React então 'hidrata' — reconcilia a árvore virtual com o DOM existente e adiciona interatividade. Hydration Mismatch ocorre quando HTML server !== client render.

✅ Quando usar

Acontece automaticamente em SSR/SSG com Next.js, Remix, etc.

🚫 Quando NÃO usar

Em CSR puro (SPA sem SSR) não há hydration.

👍 Prós
HTML disponível antes do JS carregar
Melhor FCP/LCP
SEO-friendly
Selective hydration no React 18
👎 Contras
TTI pode ser alto (HTML aparece mas não é interativo)
Hydration mismatch é bug sutil
Dois renders (server + client)
Custo computacional no client
🔗 Termos relacionados
JSX
Core

Sintaxe que parece HTML mas compila para React.createElement().

Virtual DOM
Core

Representação em JS da árvore do DOM real. React compara versões e aplica só as diferenças.

Reconciliation
Core

Algoritmo que compara dois Virtual DOMs e calcula o mínimo de mudanças para o DOM real.

Fiber
Core

Arquitetura interna do React 16+ que permite renderização interrompível e priorização.

Suspense
Core

Componente que mostra fallback enquanto filhos 'suspendem' (lançam Promise não resolvida).

Error Boundary
Core

Componente class que captura erros em filhos. Mostra UI de fallback em vez de quebrar o app.