Componentes de servidor e cliente no Next.js
Decida quando adicionar 'use client' e como compor árvores de servidor e cliente.
Componentes de servidor e cliente no Next.js é uma aula grátis de React 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O padrão: componentes de servidor
No Roteador de aplicativos, todos os componentes são componentes de servidor por padrão. Eles são renderizados no servidor, não têm JavaScript no lado do cliente e podem acessar diretamente bancos de dados, variáveis de ambiente e o sistema de arquivos.
Ativando componentes do cliente
Adicione 'use client' ao início de um arquivo para transformá-lo em um componente do cliente. Todas as importações dele também se tornam do lado do cliente — ele cria um limite do cliente.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}O que os componentes de servidor podem fazer
Os componentes de servidor podem usar await para obter dados diretamente, ler variáveis de ambiente, acessar o sistema de arquivos e importar pacotes grandes exclusivos do servidor sem aumentar o pacote enviado ao cliente.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}O que os componentes de servidor não podem fazer
Os componentes de servidor não podem usar ganchos (useState, useEffect), interfaces do navegador nem manipuladores de eventos. Esses recursos exigem 'use client'.
Compondo servidor e cliente
Passe a saída de um componente de servidor como propriedades ou filhos para componentes do cliente. O padrão recomendado é manter a obtenção de dados nos componentes de servidor e a interatividade nos componentes do cliente.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Passando filhos do servidor para o cliente
Um componente de servidor pode passar JSX como children para um componente do cliente. Os filhos continuam sendo renderizados no servidor; o contêiner do cliente adiciona interatividade.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}O limite do cliente
Adicionar 'use client' faz com que o arquivo e todas as importações filhas sejam executados no lado do cliente. Para manter um filho como componente de servidor, passe-o como propriedade ou espaço reservado em vez de importá-lo diretamente.
Padrões de obtenção de dados
Obtenha os dados nos componentes de servidor e passe-os adiante. Evite obtê-los nos componentes do cliente quando possível — isso aumenta o tamanho do pacote do cliente e duplica a lógica do servidor.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Utilitários exclusivos do servidor
O pacote server-only gera um erro de compilação se um módulo exclusivo do servidor for importado acidentalmente para um componente do cliente.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Compartilhando estado entre servidor e cliente
Os componentes de servidor não podem manter estado. Para compartilhar o estado obtido no servidor com componentes interativos do cliente, passe-o como propriedades na renderização inicial e gerencie as atualizações no cliente.
Quando ativar o modo do cliente
Adicione 'use client' quando precisar de: ganchos (useState, useEffect), eventos do navegador (onClick), interfaces do navegador (localStorage, window) ou bibliotecas de terceiros executadas no cliente.
Verificação rápida
O que você deve adicionar ao início de um arquivo para usar useState ou onClick no Roteador de aplicativos do Next.js?
Recapitulação
Todos os componentes do Roteador de aplicativos são componentes de servidor por padrão — pacote JS inexistente no cliente e acesso direto aos dados. Adicione 'use client' somente onde precisar de interatividade. Componha passando dados obtidos no servidor como propriedades ou filhos para contêineres do cliente, mantendo o limite do cliente o mais próximo possível das folhas da árvore.
Perguntas Frequentes
A aula “Componentes de servidor e cliente no Next.js” é grátis?
Sim — o texto completo de “Componentes de servidor e cliente no Next.js” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Componentes de servidor e cliente no Next.js”?
Decida quando adicionar 'use client' e como compor árvores de servidor e cliente. Você pratica React 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 React Academy?
Nenhuma experiência prévia é necessária. React 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 de servidor e cliente no Next.js”?
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 React Academy?
Sim. Cada aula de React 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
- Convenções de arquivos do App Router
- Componentes de servidor e cliente no Next.js
- Rotas dinâmicas e grupos de rotas
- API de metadados e SEO no App Router