O que são React Server Components?
React Server Components (RSCs) representam uma mudança fundamental na arquitetura de aplicações React. Diferente do modelo tradicional onde toda a lógica roda no navegador, RSCs permitem que você execute código diretamente no servidor, renderizando componentes antes de enviá-los ao cliente. Esse paradigma não é apenas uma otimização — é uma forma completamente nova de pensar em como construir interfaces.
Para entender melhor: num aplicativo React convencional, você envia JavaScript para o navegador, que o executa, faz requisições HTTP, e depois renderiza a interface. Com Server Components, você pode acessar bancos de dados, arquivos e APIs sensíveis diretamente no servidor, sem expor nenhum desses dados ao cliente. O navegador recebe apenas o resultado da renderização — uma estrutura otimizada pronta para ser exibida.
A distinção entre Server e Client Components
Essa é a parte crucial que muitos desenvolvedores confundem inicialmente. Um Server Component é renderizado apenas no servidor; seu código nunca chega ao navegador. Um Client Component (marcado com 'use client') segue o modelo tradicional React — seu código é enviado ao cliente e executado lá. Na mesma aplicação, você usará ambos, e eles trabalham juntos de forma integrada.
// app/produtos/page.jsx — Server Component por padrão (Next.js 13+)
import { conectarBancoDados } from '@/lib/db';
import { ProdutoCard } from '@/components/ProdutoCard'; // Client Component
export default async function PaginaProdutos() {
// Isso roda APENAS no servidor
const db = await conectarBancoDados();
const produtos = await db.query('SELECT * FROM produtos LIMIT 10');
return (
<div>
<h1>Nossa Loja</h1>
{produtos.map(produto => (
<ProdutoCard key={produto.id} produto={produto} />
))}
</div>
);
}
// components/ProdutoCard.jsx — Client Component
'use client';
import { useState } from 'react';
export function ProdutoCard({ produto }) {
const [adicionadoAoCarrinho, setAdicionadoAoCarrinho] = useState(false);
const adicionarCarrinho = () => {
// Lógica interativa que precisa rodar no cliente
setAdicionadoAoCarrinho(true);
setTimeout(() => setAdicionadoAoCarrinho(false), 2000);
};
return (
<div className="card">
<h2>{produto.nome}</h2>
<p>R$ {produto.preco.toFixed(2)}</p>
<button onClick={adicionarCarrinho}>
{adicionadoAoCarrinho ? 'Adicionado!' : 'Adicionar ao Carrinho'}
</button>
</div>
);
}
Note que o componente PaginaProdutos é async — uma característica exclusiva de Server Components. Ele acessa o banco de dados diretamente, sem nenhuma rota API intermediária. Os dados são processados no servidor e apenas o HTML renderizado chega ao cliente.
Modelo Mental: Como Pensar em Server Components
O maior desafio ao trabalhar com RSCs não é a sintaxe — é mudar sua mentalidade sobre onde e como o código executa. Por anos, fomos ensinados que React executa no navegador. Agora, a execução padrão é no servidor, e você precisa "descer" para o cliente apenas quando necessário.
O fluxo de renderização
Quando você acessa uma página num aplicativo com Server Components, aqui está o que acontece: (1) o servidor renderiza todos os Server Components; (2) para cada Client Component, o servidor apenas "marca" que aquela seção precisa ser interativa; (3) o servidor envia a renderização HTML + referências dos Client Components; (4) o navegador "hidrata" os Client Components, tornando-os interativos.
// app/layout.jsx
export default function RootLayout({ children }) {
// Server Component - executa no servidor
const dataAtual = new Date().toLocaleDateString('pt-BR');
return (
<html>
<body>
<header>
<h1>Meu Site - {dataAtual}</h1>
<Navbar /> {/* Client Component com menu interativo */}
</header>
<main>{children}</main>
<Footer /> {/* Server Component */}
</body>
</html>
);
}
// components/Navbar.jsx
'use client';
import { useState } from 'react';
export function Navbar() {
const [menuAberto, setMenuAberto] = useState(false);
return (
<nav>
<button onClick={() => setMenuAberto(!menuAberto)}>
Menu
</button>
{menuAberto && (
<ul>
<li><a href="/">Home</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
)}
</nav>
);
}
Limitações e Restrições Importantes
Server Components não podem usar hooks (useState, useEffect, etc.) porque não existem num navegador. Também não podem usar APIs do browser como localStorage ou window. Se você tentar fazer isso, receberá um erro claro. Essa limitação é, na verdade, uma vantagem — força você a separar logicamente o código que pertence ao servidor do que pertence ao cliente.
Há também uma restrição sutil: você não pode passar componentes Client como props para Server Components. Isso porque o componente Client precisa ser serializado, e funções JavaScript não são serializáveis. A solução é usar o padrão "children" ou reorganizar sua árvore de componentes.
// ❌ ERRADO - não funciona
export default function ServerComp() {
return <ClientComp>
<OutroClientComponent /> {/* Erro! */}
</ClientComp>;
}
// ✅ CORRETO - usar children
'use client';
export function ClientComp({ children }) {
return <div>{children}</div>;
}
export default function ServerComp() {
return <ClientComp>
<OutroClientComponent />
</ClientComp>;
}
Casos de Uso Reais e Práticos
A força dos Server Components brilha quando você tem cenários que envolvem dados sensíveis, lógica de negócio complexa ou operações caras em termos de performance. Vou mostrar casos reais que você encontrará em projetos profissionais.
Autenticação e Autorização
Um dos casos de uso mais poderosos é renderizar conteúdo diferente baseado na autenticação do usuário, tudo no servidor. Você acessa a sessão do usuário, verifica permissões e renderiza apenas o que ele pode ver — economizando dados e melhorando segurança.
// app/dashboard/page.jsx
import { obterSessaoUsuario } from '@/lib/auth';
import { redirecionarPara } from 'next/navigation';
import { PainelAdministrador } from '@/components/admin/PainelAdministrador';
import { PainelUsuario } from '@/components/usuario/PainelUsuario';
export default async function Dashboard() {
const sessao = await obterSessaoUsuario();
// Renderização condicional no servidor
if (!sessao) {
redirecionarPara('/login');
}
if (sessao.role === 'admin') {
return <PainelAdministrador usuarioId={sessao.id} />;
}
return <PainelUsuario usuarioId={sessao.id} />;
}
// app/admin/usuarios/page.jsx
import { obterSessaoUsuario } from '@/lib/auth';
import { conectarBancoDados } from '@/lib/db';
import { UsuariosTable } from '@/components/admin/UsuariosTable';
export default async function AdminUsuarios() {
const sessao = await obterSessaoUsuario();
// Verificação de permissão no servidor
if (sessao?.role !== 'admin') {
throw new Error('Acesso negado');
}
// Dados sensíveis nunca saem do servidor
const db = await conectarBancoDados();
const usuarios = await db.query(
'SELECT id, nome, email, role FROM usuarios'
);
return <UsuariosTable usuarios={usuarios} />;
}
Busca e Filtros com SEO Otimizado
Outra aplicação prática é criar páginas dinâmicas que são pré-renderizadas no servidor com metadados corretos para SEO. Você busca dados, renderiza a página e tudo é otimizado para mecanismos de busca.
// app/blog/[slug]/page.jsx
import { conectarBancoDados } from '@/lib/db';
import { Metadata } from 'next';
import { ArtigoConteudo } from '@/components/blog/ArtigoConteudo';
// Função especial que gera metadados dinâmicos
export async function generateMetadata({ params }): Promise<Metadata> {
const db = await conectarBancoDados();
const artigo = await db.query(
'SELECT * FROM artigos WHERE slug = ?',
[params.slug]
);
if (!artigo) {
return { title: 'Artigo não encontrado' };
}
return {
title: artigo.titulo,
description: artigo.resumo,
openGraph: {
title: artigo.titulo,
description: artigo.resumo,
images: [artigo.imagemUrl],
},
};
}
export default async function PaginaArtigo({ params }) {
const db = await conectarBancoDados();
const artigo = await db.query(
'SELECT * FROM artigos WHERE slug = ?',
[params.slug]
);
if (!artigo) {
return <h1>Artigo não encontrado</h1>;
}
return (
<article>
<h1>{artigo.titulo}</h1>
<p className="data">
Publicado em {new Date(artigo.dataCriacao).toLocaleDateString('pt-BR')}
</p>
<ArtigoConteudo conteudo={artigo.conteudo} />
</article>
);
}
Operações com Banco de Dados Diretamente
Server Components eliminam a necessidade de criar rotas API só para buscar dados. Você acessa o banco diretamente, com todas as vantagens de segurança (credenciais não são expostas) e simplicidade.
// app/produtos/page.jsx
import { conectarBancoDados } from '@/lib/db';
import { ProdutosList } from '@/components/ProdutosList';
import { Filtros } from '@/components/Filtros';
export default async function Loja({ searchParams }) {
const db = await conectarBancoDados();
// Construir query dinamicamente baseado em filtros
let query = 'SELECT * FROM produtos WHERE 1=1';
const params = [];
if (searchParams.categoria) {
query += ' AND categoria = ?';
params.push(searchParams.categoria);
}
if (searchParams.minPreco) {
query += ' AND preco >= ?';
params.push(parseFloat(searchParams.minPreco));
}
if (searchParams.maxPreco) {
query += ' AND preco <= ?';
params.push(parseFloat(searchParams.maxPreco));
}
query += ' ORDER BY preco ASC LIMIT 50';
const produtos = await db.query(query, params);
return (
<div>
<Filtros />
<ProdutosList produtos={produtos} />
</div>
);
}
Boas Práticas e Padrões Efetivos
Dominar Server Components vai além de entender a sintaxe. É sobre aplicar padrões que tornam seu código manutenível, performático e seguro. Existem convenções que emergiram da comunidade após anos de uso em produção.
Organização de Componentes
A primeira regra é clara: minimize Client Components e maximize Server Components. Por padrão, presuma que seus componentes serão Server Components. Isso significa menos JavaScript sendo enviado ao navegador, páginas mais rápidas e menos bugs de hidratação. Você só marca com 'use client' quando realmente precisa de interatividade.
// ✅ BOM - Server Component com seções interativas bem definidas
// app/dashboard/page.jsx
import { DadosUsuario } from '@/components/dashboard/DadosUsuario'; // Server
import { GraficoVendas } from '@/components/dashboard/GraficoVendas'; // Client
import { FormularioConfiguracoes } from '@/components/dashboard/FormularioConfiguracoes'; // Client
export default async function Dashboard() {
return (
<div>
<DadosUsuario /> {/* Apenas renderiza dados */}
<GraficoVendas /> {/* Interativo, precisa estar no cliente */}
<FormularioConfiguracoes /> {/* Interativo, precisa estar no cliente */}
</div>
);
}
Passagem de Dados e Padrão de Children
Quando você tem um Client Component dentro de um Server Component e precisa passar dados, existem estratégias. A mais comum é usar o padrão children. Basicamente, você renderiza o conteúdo estático no servidor e passa apenas dados (que são serializáveis) para o Client Component.
// components/ListaComFiltro.jsx
'use client';
import { useState } from 'react';
export function ListaComFiltro({ itens, renderItem }) {
const [filtro, setFiltro] = useState('');
const itensFiltrados = itens.filter(item =>
item.nome.toLowerCase().includes(filtro.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Filtrar..."
value={filtro}
onChange={(e) => setFiltro(e.target.value)}
/>
<ul>
{itensFiltrados.map(item => (
<li key={item.id}>
{renderItem(item)}
</li>
))}
</ul>
</div>
);
}
// app/produtos/page.jsx
import { conectarBancoDados } from '@/lib/db';
import { ListaComFiltro } from '@/components/ListaComFiltro';
export default async function Produtos() {
const db = await conectarBancoDados();
const produtos = await db.query('SELECT * FROM produtos');
// Passar dados serializáveis para Client Component
return (
<ListaComFiltro
itens={produtos}
renderItem={(produto) => (
<div>
<h3>{produto.nome}</h3>
<p>R$ {produto.preco.toFixed(2)}</p>
</div>
)}
/>
);
}
Tratamento de Erros e Loading States
Num mundo onde suas páginas são renderizadas no servidor, o tratamento de erros é diferente. Você pode usar a API error.jsx do Next.js para capturar erros de Server Components. Para loading states, use loading.jsx ou a API Suspense.
// app/produtos/error.jsx
'use client';
export default function ErroCarregamentoProdutos({ error, reset }) {
return (
<div className="erro-container">
<h1>Erro ao carregar produtos</h1>
<p>{error.message}</p>
<button onClick={() => reset()}>
Tentar novamente
</button>
</div>
);
}
// app/produtos/loading.jsx
export default function LoadingProdutos() {
return (
<div className="skeleton-loader">
<div className="skeleton" />
<div className="skeleton" />
<div className="skeleton" />
</div>
);
}
// app/produtos/page.jsx
import { Suspense } from 'react';
import { ProdutosLista } from '@/components/ProdutosLista';
import { LoadingProdutos } from './loading';
function ProdutosComErro() {
// Este componente pode lançar erro
throw new Error('Teste de erro');
}
export default function Produtos() {
return (
<Suspense fallback={<LoadingProdutos />}>
<ProdutosLista />
</Suspense>
);
}
Conclusão
React Server Components representam uma evolução genuína da arquitetura web, não apenas um truque de otimização. O primeiro ponto crucial que você deve levar: mude seu modelo mental de "componentes rodando no browser" para "renderização no servidor por padrão". Isso impacta cada decisão arquitetural que você toma.
O segundo aprendizado é prático: Server Components e Client Components não são concorrentes, são complementares. O verdadeiro poder emerge quando você os combina estrategicamente — renderizando dados no servidor, enviando apenas o necessário ao cliente, e deixando a interatividade para onde ela pertence. Um aplicativo bem estruturado será majoritariamente Server Components com "ilhas" de Client Components.
Terceiro, reconheça que essa mudança resolve problemas reais de segurança e performance de forma elegante. Você não precisa mais criar três rotas API diferentes, validar dados no cliente, ou se preocupar com credentials sendo expostas. O servidor faz o trabalho, e o cliente recebe apenas o que precisa exibir.