Componentes do Servidor React (RSC)

Componentes apenas do servidor para performance otimizada, padrão no App Router. Ideal para Apps modernos, aplicações com muitos dados e Apps seguros que requerem lógica do lado do servidor.

Servidor

🌐
Request
Response
🖥️
Servidor recebe requisição
Servidor busca dados
React.renderToReadableStream()
Servidor renderiza Server Components
Servidor serializa payload RSC
Servidor envia payload RSC

Cliente

Cliente recebe payload RSC
React.hydrateRoot()
Cliente hidrata componentes
✨Página interativa
Benefícios x Trade-offs

Benefits

  • •Performance Otimizada: Componentes do servidor + cliente
  • •Acesso Seguro aos Dados: Busca de dados do lado do servidor
  • •Tamanho de Bundle Reduzido: Menos JavaScript para o cliente
  • •Melhor SEO: Conteúdo renderizado no servidor

Trade-offs

  • •Divisão de interatividade: Precisa escolher servidor vs cliente
  • •Passo de hidratação: Componentes cliente precisam hidratação
  • •Curva de aprendizado: Entender limites servidor/cliente
  • •Limites de serialização: Não pode passar funções/classes
Como implementar?

RSC usa Server Components por padrão no App Router. Server Components não podem importar Client Components.

// Server Component (padrão)
export default async function ServerComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return (
    <div>
      <h1>{data.title}</h1>
      <ClientComponent data={data} />
    </div>
  );
}

// Client Component (quando necessário)
"use client";
import { useState } from "react";

export function ClientComponent({ data }: { data: any }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
  • •Server Components são funções assíncronas (padrão, sem diretiva necessária)
  • •Não pode usar hooks React em Server Components
  • •Adicione diretiva 'use client' apenas quando precisar de interatividade
  • •Server Components podem buscar dados diretamente, Client Components usam hooks