Server Components na prática: menos JavaScript no navegador

Publicidade

No App Router, todo componente é um Server Component por padrão. Ele roda no servidor, pode ler o banco de dados diretamente e envia ao navegador apenas o HTML resultante, sem o código que o gerou.

O que se ganha

• Menos JavaScript: bibliotecas usadas só para montar a página, como um parser de Markdown, ficam no servidor.

• Acesso direto aos dados: nada de criar uma API só para a própria página consumir.

• Segredos protegidos: chaves de API usadas no componente nunca chegam ao navegador.

Quando usar "use client"

Um componente precisa rodar no navegador quando depende de interação ou de APIs do browser. A diretiva "use client" no topo do arquivo marca essa fronteira:

'use client'

import { useState } from 'react'

export function Curtir() {
  const [total, setTotal] = useState(0)
  return <button onClick={() => setTotal(total + 1)}>♥ {total}</button>
}

Estado (useState), efeitos (useEffect), eventos como onClick e objetos como window pedem um Client Component.

Empurre a fronteira para as folhas

O erro mais comum é marcar uma página inteira com "use client" por causa de um único botão. O melhor é manter a página no servidor e isolar só o trecho interativo num componente pequeno. O resto continua sem custo nenhum para o navegador.

Regra prática: comece tudo no servidor e só desça para o cliente quando algo precisar reagir ao usuário.