1~
2React 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.
3~
4## O que são Server Components?
5~
6Tradicionalmente, 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.
7~
8### Os Benefícios
9~
101.  **Zero Bundle Size**: Dependências usadas em Server Components (como parsers de markdown ou bibliotecas pesadas de datas) ficam no servidor.
112.  **Acesso Direto ao Backend**: Você pode consultar seu banco de dados diretamente dentro do seu componente sem expor endpoints de API.
123.  **Code Splitting Automático**: Client components importados do lado do servidor são automaticamente divididos em código separado.
13~
14## Padrão de Busca de Dados
15~
16Com RSC, você pode tornar seus componentes `async` e aguardar dados diretamente.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense para Streaming
39~
40Como a busca de dados pode ser lenta, envolva seus componentes em `<Suspense>` para mostrar uma UI de fallback imediatamente enquanto os dados carregam.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Intercalando Server e Client Components
60~
61Um dos aspectos mais confusos é como combinar Server e Client components.
62~
63**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.
64~
65### O Padrão "Children"
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Armadilhas Comuns
100~
1011.  **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.
1022.  **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.
103~
104## Conclusão
105~
106React 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.
107~