O que significa um componente client-side?
Entenda o que realmente acontece quando você usa useClient e como funciona a hidratação de componentes em React. Aprenda a diferença entre renderização no cliente e no servidor em Next.js ou qualquer framework moderno.
Por que isso é importante
Saber a diferença entre client-side e server-side define sua capacidade de criar aplicações escaláveis, acessíveis e rápidas em React ou Next.js. Entenda hidratação e garanta que sua interface funcione bem mesmo sem JavaScript, evitando erros críticos de experiência do usuário e SEO. Esta é a chave para dominar frameworks modernos e entregar soluções profissionais.
Componente client-side: não é o que parece
“Client-side” não significa que o React ignora o servidor. O maior erro: acreditar que usar useClient faz o componente rodar só no browser. Isso não é verdade. Ao adicionar useClient, seu componente ainda é processado do lado do servidor primeiro — igual a qualquer outro componente sem o flag. Só depois acontece algo especial: a hidratação.
⚠️Atenção
Não se engane: o componente continua renderizando no servidor. Desabilite o JavaScript do navegador — seu formulário, por exemplo, ainda aparece e funciona na tela.
O que useClient realmente faz?
Adicionar useClient ativa um processo único: todo o JavaScript daquele componente é enviado para o front-end após o HTML ser montado no servidor. Ou seja: você tem um boost no comportamento dinâmico, mas apenas após a hidratação.
ℹ️Info importante
O HTML do seu componente já está na tela antes mesmo do JS entrar em ação. Isso melhora performance e SEO.
O segredo: hidratação
Hidratação é o processo onde o React “liga” o JS no HTML estático vindo do servidor, permitindo interações dinâmicas. Sem hidratação, o componente aparece, mas não interage. Com ela, tudo parece vivo e funcional do lado do cliente.
⚠️Alerta de confusão comum
Hidratação não é o mesmo que renderizar do zero no cliente! O HTML já existe e só ganha vida com JS posteriormente.
O que muda ao usar useClient?
O que realmente muda é quem fornece o “poder” de interação. Com useClient, o JavaScript necessário é entregue ao navegador — garantindo animações, respostas a cliques, estados dinâmicos. Sem ele, apenas HTML estático.
Posso confiar só no client-side?
Sempre cheque o comportamento da sua aplicação sem JavaScript. Componentes importantes, como formulários, devem funcionar no servidor. Confundir renderização com interatividade pode deixar parte do seu público sem acesso à funcionalidade.
⚠️Cuidado com SEO
Motores de busca leem o HTML do servidor. Se você depender apenas do client-side, pode comprometer indexação e performance.
Funciona só no Next.js?
Não! Hidratação não é exclusiva do Next.js. Frameworks como Remix, Astro ou outros que usam React ou SSR seguem lógica semelhante. Não confunda a interface com a base de funcionamento.
ℹ️Dica
Sempre leia a documentação para entender como cada framework trata server vs client e hidratação!
Resumo definitivo: grava isso
Renderização no servidor exibe o HTML; o cliente só entra em cena para dar interatividade. UseClient não impede render no servidor. O segredo é entender hidratação e saber quando precisa dela. Não dependa só do JS!
✅Sucesso no dia a dia
Teste sempre sua aplicação sem JS, otimize para SEO e Web Vitals, e use useClient apenas quando realmente necessário.
Onde aprender mais?
Quer evoluir rápido, sem enrolação? Assista meus vídeos e tutoriais exclusivos no canal Dev Doido no YouTube: Dev Doido no YouTube. Lá, tudo isso fica ainda mais prático.