React Server Components (RSC) são renderizados apenas no servidor — seu JavaScript nunca é enviado para o navegador. No App Router, todo component é um Server Component por padrão; você opta explicitamente por comportamento no cliente.
db ;
() {
users = db..();
(
);
}
Server Components podem ser async, fazer await de dados diretamente e acessar recursos apenas do servidor (banco de dados, sistema de arquivos, secrets) — porque executam no servidor. Nenhuma camada de API é necessária para buscar dados, e secrets nunca chegam ao cliente.
O navegador recebe o HTML/UI renderizado, não o código do component ou suas dependências. Um Server Component que usa uma biblioteca pesada de markdown ou date não envia nada dessa biblioteca para o navegador — reduzindo drasticamente o tamanho do bundle.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Sem interatividade, state, effects ou APIs do navegador — esses exigem um Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
O padrão: Server Components lidam com dados/estrutura; incorpore Client Components apenas onde a interatividade é necessária ("islands").
Server Components são a característica definidora do App Router.
Eles reduzem o tamanho do bundle do cliente (menos JS para baixar/fazer parse), permitem acesso direto e seguro a dados do lado do servidor sem uma API, e melhoram o desempenho e SEO.
Saber que eles são o padrão — e o que força um component a ser um Client Component — é fundamental para estruturar aplicações do App Router de forma eficiente.