Componentes do servidor e componentes do cliente
Compreender os React Server Components, quando adicionar a diretiva 'use client' e como combinar HTML renderizado no servidor com ilhas interativas no cliente.
Componentes do servidor e componentes do cliente é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Dois mundos em um único aplicativo
Os Componentes de Servidor do React (RSC) permitem dividir uma árvore entre partes renderizadas no servidor e partes interativas no cliente. No roteador de aplicações do Next.js, os componentes são, por padrão, de Servidor; opte pelo Cliente com 'use client'.
O que os Componentes de Servidor fazem
Os Componentes de Servidor são executados somente no servidor. Eles podem: buscar dados diretamente, acessar o sistema de arquivos, usar segredos exclusivos do servidor e renderizar para HTML sem enviar React ao cliente. Eles não podem: usar ganchos, gerenciar estado ou lidar com eventos.
O que os Componentes de Cliente fazem
Os Componentes de Cliente são executados no servidor para SSR (HTML inicial) e no cliente para oferecer interatividade. Eles podem: usar useState, useEffect, manipuladores de eventos e APIs do navegador.
O padrão é o servidor
No roteador de aplicações do Next.js, todo componente é, por padrão, um Componente de Servidor. Isso é excelente — a maior parte do seu aplicativo usa renderização estática.
// app/posts/page.tsx — Server Component by default
export default async function Posts() {
const posts = await fetch('https://api/posts').then(r => r.json());
return (
<ul>
{posts.map(p => <li key={p.id}>{p.title}</li>)}
</ul>
);
}Opte pelo cliente
Adicione 'use client' no início de um arquivo para marcar os componentes dele (e as importações deles) como Componentes de Cliente.
// app/Counter.tsx
'use client';
import { useState } from 'react';
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Compondo servidor e cliente
Os Componentes de Servidor podem renderizar Componentes de Cliente, mas os Componentes de Cliente não podem importar Componentes de Servidor. Passe o conteúdo renderizado no servidor como filhos para os componentes de Cliente que servem de contêiner.
// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';
export default function Home() {
return (
<ClientShell>
<ServerWidget />
</ClientShell>
);
}Por que esse padrão é importante
Pacotes JS menores — somente os Componentes de Cliente são enviados ao navegador. Acesso direto ao banco de dados e aos arquivos — não é necessária uma camada de API para dados somente de leitura. Melhor SEO e LCP mais rápido — o HTML chega totalmente renderizado.
Regras da fronteira do cliente
Depois que um arquivo é marcado com 'use client', todos os componentes desse arquivo e quaisquer filhos importados tornam-se Componentes de Cliente. 'use client' marca uma fronteira entre o servidor e o cliente.
Ações do servidor
As funções marcadas com 'use server' são executadas somente no servidor, mas podem ser chamadas a partir de Componentes de Cliente — como RPC. Elas são usadas com frequência para envios de formulários e mutações.
// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
await db.posts.create({ data: { title } });
revalidatePath('/posts');
}
// In a Client form component:
<form action={createPost}>
<input name="title" />
<button>Create</button>
</form>Passando propriedades do servidor para o cliente
As propriedades passadas do Servidor para o Cliente precisam ser serializáveis em JSON — não podem conter funções, classes ou datas com formatos personalizados. Faça a conversão antes de passá-las.
Identificando cada tipo
Observe as importações: useState, useEffect e manipuladores onClick obrigam um componente a ser um Componente de Cliente. Uma exibição pura de dados pode continuar no Servidor.
Ganhos de desempenho
Os Componentes de Servidor reduzem drasticamente o pacote JS. Uma página com conteúdo principalmente estático e alguns widgets interativos envia somente o JS das partes interativas — às vezes 90% menor.
Verificação rápida
Qual gancho do React NÃO é permitido em um Componente de Servidor do Next.js?
Recapitulação: servidor vs cliente
Componentes de Servidor: executados somente no servidor, async/await OK, sem ganchos, estado ou manipuladores, e com pacotes menores. Componentes de Cliente: ativados com 'use client', interativos com useState/useEffect/eventos. O Servidor pode renderizar o Cliente; o Cliente não pode importar o Servidor (mas pode recebê-lo como filho). Ações do Servidor ('use server') para mutações no estilo RPC.
Perguntas Frequentes
A aula “Componentes do servidor e componentes do cliente” é grátis?
Sim — o texto completo de “Componentes do servidor e componentes do cliente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Componentes do servidor e componentes do cliente”?
Compreender os React Server Components, quando adicionar a diretiva 'use client' e como combinar HTML renderizado no servidor com ilhas interativas no cliente. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Componentes do servidor e componentes do cliente”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Pages Router vs App Router
- Componentes do servidor e componentes do cliente
- SSG, SSR e ISR
- Rotas de API e Middleware do Next.js