React Server Components (RSC) mudaram fundamentalmente a forma como construímos aplicações React. Ao mover a lógica de renderização para o servidor, podemos reduzir significativamente o bundle JavaScript enviado ao cliente, resultando em tempos de carregamento mais rápidos e melhores experiências do usuário. Neste artigo, exploraremos padrões avançados e melhores práticas para aproveitar os RSCs em 2026.

O que são Server Components?

Tradicionalmente, os componentes React eram renderizados inteiramente no cliente (CSR) ou pré-renderizados no servidor como HTML (SSR) e depois hidratados no cliente. Server Components nos permitem renderizar componentes exclusivamente no servidor. Seu código nunca é enviado ao navegador.

Os Benefícios

1. Zero Bundle Size: Dependências usadas em Server Components (como parsers de markdown ou bibliotecas pesadas de datas) ficam no servidor.
2. Acesso Direto ao Backend: Você pode consultar seu banco de dados diretamente dentro do seu componente sem expor endpoints de API.
3. Code Splitting Automático: Client components importados do lado do servidor são automaticamente divididos em código separado.

Padrão de Busca de Dados

Com RSC, você pode tornar seus componentes async e aguardar dados diretamente.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense para Streaming

Como a busca de dados pode ser lenta, envolva seus componentes em <Suspense> para mostrar uma UI de fallback imediatamente enquanto os dados carregam.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Intercalando Server e Client Components

Um dos aspectos mais confusos é como combinar Server e Client components.

Regra Geral: Server Components podem importar Client Components. Client Components não podem importar Server Components diretamente. No entanto, você pode passar um Server Component como children para um Client Component.

O Padrão "Children"

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Count: {count}
      {children} {/* This can be a Server Component! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

Armadilhas Comuns

1. Usando Context em Server Components: Context é um conceito do lado do cliente. Se você precisar compartilhar dados no servidor, passe como props ou use um cache de escopo de requisição especializado.
2. Adicionando Event Handlers: Você não pode adicionar onClick ou onChange a um Server Component. Essa lógica pertence a um Client Component genérico como nó folha.

Conclusão

React Server Components não são apenas um recurso; são uma mudança de paradigma. Ao entender a fronteira entre servidor e cliente, você pode construir aplicações que são altamente interativas e incrivelmente rápidas.