Ir para o conteúdo
Next.js

O que é Server Component?

Definição

Server Components são componentes React renderizados exclusivamente no servidor, sem enviar JavaScript ao cliente. No Next.js 13+, todo componente é Server Component por padrão, permitindo acesso direto a banco de dados, APIs internas e variáveis de ambiente com segurança.

Eles reduzem o bundle do cliente drasticamente, pois o código do servidor nunca é exposto. Não suportam hooks de estado ou efeitos, sendo ideais para busca de dados e renderização estática de conteúdo pesado.

Exemplo Prático
TypeScript
async function UserProfile({ id }: { id: string }) {
  const user = await db.user.findUnique({ where: { id } });

  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.email}</p>
    </div>
  );
}

Termos Relacionados

Client ComponentNext.jsApp RouterNext.jsServer ActionsNext.js

Artigos que aprofundam Server Component

React Server Components vs Client Components: Quando Usar Cada Um no Next.jsServer Components no Next.js 16: Guia Completo com Exemplos Reais

Quer ver Server Component em ação em projetos reais?

Ver artigos sobre Server Component