Hidratação progressiva com hidratação seletiva

A hidratação seletiva é um recurso do React 18 que permite ao React começar a hidratar componentes assim que o código JavaScript deles chega, sem esperar que o JavaScript da página inteira seja baixado. Cada seção com divisão de código independente é hidratada quando seu pacote é carregado, e não toda de uma vez.

Antes do React 18, a hidratação era "tudo ou nada" — o React precisava baixar todo o JavaScript e hidratar a árvore inteira antes que qualquer parte da página se tornasse interativa. O React 18 elimina essa restrição: partes da árvore são hidratadas de forma independente conforme o código e os dados ficam disponíveis.

Se o usuário clicar ou interagir com um limite Suspense que ainda não foi hidratado, o React priorizará imediatamente a hidratação dessa subárvore antes de qualquer outro trabalho de hidratação pendente. Isso significa que aquilo que o usuário está tentando usar se torna interativo primeiro, mesmo que não esteja na ordem do documento.

A combinação de React.lazy com importações dinâmicas e limites Suspense permite a hidratação seletiva de componentes com divisão de código. O navegador baixa primeiro o pacote principal de JS, hidratando imediatamente a estrutura inicial. Cada componente carregado sob demanda é hidratado quando seu bloco é baixado — progressivamente, conforme o navegador os busca.

O resultado é que o conteúdo acima da dobra se torna interativo antes mesmo de o JavaScript abaixo da dobra ser baixado. O usuário pode interagir com a navegação e a CTA da seção de destaque enquanto o fluxo de comentários e o componente de recomendações ainda estão carregando seus blocos de JavaScript.

A hidratação seletiva reduz o Tempo Total de Bloqueio (TBT) — a principal métrica de desempenho da hidratação. Na aba Desempenho do Chrome DevTools, as tarefas longas (tarefas com mais de 50 ms) são destacadas em vermelho. Antes da hidratação seletiva, você pode ver uma única tarefa longa de 300 ms para a hidratação completa; depois, vê várias tarefas pequenas distribuídas ao longo do tempo.

O antipadrão que prejudica a hidratação seletiva é importar todos os componentes no nível superior do aplicativo: import Footer from './Footer'. Isso força o navegador a baixar, analisar e executar o código de Footer antes que qualquer hidratação comece. Substitua as importações de nível superior dos componentes abaixo da dobra por React.lazy + importações dinâmicas.

Use const Footer = React.lazy(() => import('./Footer')) para componentes que aparecem abaixo da área de visualização inicial. Envolva-os em Suspense com uma interface alternativa simples. O navegador reduz a prioridade de busca do pacote de Footer até que a hidratação do conteúdo acima da dobra seja concluída, melhorando naturalmente o TBT.

A transmissão em fluxo e a hidratação seletiva são complementares: a transmissão em fluxo envia blocos de HTML para melhorar FCP e LCP, enquanto a hidratação seletiva processa blocos de JavaScript para melhorar TTI e TBT. Juntas, elas abrangem tanto a dimensão de "mostrar o conteúdo rapidamente" quanto a de "torná-lo interativo rapidamente" do desempenho.

Os Componentes de Servidor do React levam a hidratação seletiva ainda mais longe: os componentes de servidor não produzem nenhum JavaScript para o cliente. Somente os componentes do cliente (marcados com "use client") precisam ser hidratados. Isso reduz a quantidade total de JavaScript que precisa ser hidratada, tornando a hidratação seletiva ainda mais eficaz.

Um padrão prático é usar renderToPipeableStream para transmitir HTML, envolver a página em uma chamada de hydrateRoot na raiz (em vez de createRoot) para ativar o modo de hidratação, usar React.lazy para todas as seções abaixo da dobra e envolver cada seção em um limite Suspense. O React cuida do restante automaticamente.

Como a interação do usuário afeta a prioridade da hidratação seletiva no React 18?

A hidratação seletiva permite que o React hidrate subárvores de componentes progressivamente, conforme o JavaScript delas chega, em vez de esperar pelo pacote completo. As interações do usuário priorizam a hidratação da subárvore selecionada. React.lazy + importações dinâmicas para conteúdo abaixo da dobra, combinadas com limites Suspense, permitem esse padrão progressivo. A hidratação seletiva e o SSR em transmissão em fluxo são técnicas complementares que, juntas, abrangem tanto a entrega de conteúdo quanto o desempenho da interatividade.