Desvendando o React Hydration: o segredo da interatividade rápida

Definição de Hydration por Dan Abramov (Create React App e Redux): “Hydration é como regar o HTML ‘seco’ com a ‘água’ da interatividade do usuário e dos event handlers.”

Hydration é um tópico avançado e fundamental para entender melhor como o React funciona. Antes de aprofundarmos nesse conceito, vamos revisar brevemente alguns tópicos importantes:

1. Client-Side Rendering (CSR)

A renderização do lado do cliente ocorre quando todas as páginas são carregadas e renderizadas diretamente no navegador utilizando JavaScript. Dessa forma, o navegador é responsável por lidar com todas as requisições (data fetching), gerenciar estados de carregamento e outras interações.

2. Server-Side Rendering (SSR)

Na renderização do lado do servidor, as páginas são geradas no servidor utilizando JavaScript e enviadas como HTML para o cliente. Esse processo otimiza as requisições de dados (data fetching) no servidor, melhorando a experiência do usuário. No SSR, o HTML inicial é carregado, enquanto o JavaScript necessário para a interatividade é carregado em segundo plano.

O que é React Hydration?

O Hydration é o processo de pegar um HTML pré-renderizado no servidor e torná-lo interativo no navegador. Em outras palavras, o React verifica o HTML já existente e associa o JavaScript necessário para ativar os componentes, permitindo a interatividade. Isso acelera o carregamento da página, já que o conteúdo estático (HTML inicial) é carregado rapidamente, enquanto a interatividade é habilitada posteriormente.

Vale ressaltar que o hydration não se aplica diretamente a bibliotecas ou frameworks que funcionam apenas no cliente (client-only), como o React quando usado exclusivamente no cliente.

Por que frameworks client-only não têm Hydration?

Frameworks ou bibliotecas client-only, como o React em um modelo de CSR puro, realizam a renderização das páginas diretamente no navegador, gerando a DOM a partir do zero com JavaScript. Nesse caso, não há HTML pré-renderizado pelo servidor para ser “hidratado”. Por isso, frameworks client-only utilizam o processo conhecido como Client-Side Rendering (CSR), e o conceito de hydration não se aplica a eles.

Explicando de forma simples

Imagine que você tem uma página pronta e já renderizada com todo o conteúdo visível, mas ela não faz nada quando você clica nos botões. O papel do React Hydration é dar vida a essa página, conectando o que você vê na tela ao código responsável por torná-la interativa. Quando o React realiza o processo de hydration, ele “anima” a página, vinculando os componentes visíveis ao código, tornando botões e outros elementos funcionais e interativos no navegador.

Hydration no React 19

No React 19, o método hydrate (responsável pelo hydration) foi removido e substituído pelo método hydrateRoot. Veja abaixo um exemplo de como era antes e como ficou:

Antes:

import { hydrate } from ‘react-dom’;
hydrate(<App />, document.getElementById(‘root’));

Depois:

import { hydrateRoot } from ‘react-dom/client’;
hydrateRoot(document.getElementById(‘root’), <App />);

Essa atualização foi introduzida pela equipe do React para melhorar o processo de hydration e a compatibilidade com as novas APIs do React 19.

Diferenças principais

•    hydrate (React 18 e anteriores): Inicia o processo de hydration no ponto onde o servidor deixou o HTML.
•    hydrateRoot (React 18 e posteriores): Substitui hydrate e oferece uma API mais moderna e flexível, especialmente para suportar funcionalidades como streaming e transições no React.

Bom, é isso basicamente sobre o hydration 😉