Server Components na prática: menos JavaScript, páginas mais rápidas
O que muda quando a renderização volta para o servidor, e como usamos isso para entregar interfaces rápidas sem abrir mão de interatividade.
Durante anos, a web ficou cada vez mais pesada no cliente: bibliotecas, estado, hidratação. React Server Components propõem um caminho diferente — renderizar no servidor o que não precisa de interatividade e enviar ao navegador apenas o essencial.
A regra que seguimos
Nosso padrão é simples: tudo é Server Component até que precise ser Client Component. Um componente só vira código de cliente quando usa estado, eventos ou APIs do navegador.
- Precisa de
onClick,useState,localStorage? Client Component. - Só exibe conteúdo? Server Component.
Por que isso importa para o negócio
Menos JavaScript no cliente significa páginas que carregam antes, funcionam melhor em conexões ruins e consomem menos bateria. Para quem depende de conversão, isso é receita.
// Layout é Server Component; só a busca é interativa
import { Search } from "./search" // 'use client'
export default function Layout({ children }) {
return (
<>
<nav><Logo /><Search /></nav>
<main>{children}</main>
</>
)
}
O cuidado necessário
O modelo é poderoso, mas exige disciplina: onde fica a fronteira entre servidor e cliente, como os dados fluem, o que pode ou não ser serializado. É aí que a experiência de engenharia faz diferença — decisões erradas aqui viram retrabalho depois.
Tem um produto que precisa ficar mais rápido? Vamos conversar.