Como o Next.js implementa a hidratação?
O Next.js 14 implementa a hidratação através de várias etapas:
1. Renderização do lado do servidor (SSR)
O Next.js renderiza componentes React no servidor em resposta a solicitações de usuários, incorporando dados disponíveis naquele momento. Isso resulta em uma página HTML totalmente renderizada, que inclui o estado e os dados derivados do servidor.
2. Envio do HTML para o cliente
O Next.js transmite essa página HTML renderizada para o navegador do cliente como resposta principal. O conteúdo HTML encapsula a representação estática da página.
3. Execução do JavaScript do lado do cliente
Após receber o HTML, o navegador do cliente começa a executar os pacotes JavaScript incorporados na página. Esses pacotes reconstroem os componentes React no lado do cliente, utilizando o mesmo DOM virtual empregado no servidor.
4. Comparação e reconciliação
Durante a hidratação, o React no cliente compara o DOM virtual renderizado no servidor com seu equivalente no lado do cliente, um processo conhecido como “reconciliação”. O React então sincroniza o DOM virtual do lado do cliente com o seu equivalente renderizado no servidor.
5. Manipulação de eventos e interatividade
Após a conclusão do processo de hidratação, os componentes React no lado do cliente adquirem total interatividade, permitindo a manipulação de eventos e transições de estado, semelhantes às aplicações React renderizadas apenas no cliente (CSR).