React Server Components: O Futuro do React 🚀

React Server Components (RSC) representam uma mudança fundamental na arquitetura do React, permitindo que componentes sejam renderizados no servidor sem enviar JavaScript para o cliente.

🎯 O Que São Server Components?

Server Components são componentes React que rodam exclusivamente no servidor. Eles permitem:

• Zero Bundle Size: O código do componente não é enviado ao cliente
• Acesso Direto a Dados: Consultas diretas ao banco de dados sem APIs intermediárias
• Segurança Aprimorada: Código sensível permanece no servidor
• Performance Otimizada: Menos JavaScript para o navegador processar

💡 Como Funcionam?

// app/page.tsx - Server Component (padrão no Next.js 13+)
async function UserProfile({ userId }: { userId: string }) {
  // Acesso direto ao banco de dados - roda no servidor!
  const user = await db.user.findUnique({
    where: { id: userId }
  });

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

Neste exemplo, a consulta ao banco de dados acontece no servidor. O cliente recebe apenas o HTML renderizado, sem o código da consulta.

🔄 Server vs Client Components

Server Components

// Padrão no App Router do Next.js
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  
  return <div>{data.title}</div>;
}

Client Components

'use client'; // Diretiva para marcar como Client Component

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

📊 Benefícios Práticos

1. Melhor Performance

• Menos JavaScript enviado ao cliente
• Renderização inicial mais rápida
• Melhor Core Web Vitals

2. Experiência de Desenvolvimento

• Código mais simples e direto
• Sem necessidade de APIs intermediárias
• TypeScript end-to-end

3. SEO Otimizado

• Conteúdo totalmente renderizado no servidor
• Melhor indexação pelos motores de busca

⚡ Quando Usar

Use Server Components para:

• Renderizar conteúdo estático
• Buscar dados do servidor
• Acessar recursos backend (DB, filesystem, etc.)

Use Client Components para:

• Interatividade (useState, useEffect, event handlers)
• Hooks do navegador (useSearchParams, usePathname)
• Bibliotecas que dependem de APIs do browser

🛠️ Exemplo Prático

// app/products/page.tsx (Server Component)
async function ProductsPage() {
  const products = await db.product.findMany();
  
  return (
    <div>
      <h1>Nossos Produtos</h1>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// components/ProductCard.tsx (Client Component)
'use client';

export function ProductCard({ product }) {
  const [liked, setLiked] = useState(false);
  
  return (
    <div>
      <h2>{product.name}</h2>
      <button onClick={() => setLiked(!liked)}>
        {liked ? '❤️' : '🤍'}
      </button>
    </div>
  );
}

🎓 Conclusão

React Server Components são o futuro do desenvolvimento React, oferecendo melhor performance, segurança e experiência de desenvolvimento. Com frameworks como Next.js 13+ adotando RSC por padrão, é essencial entender essa nova arquitetura.

Dica: Comece marcando apenas os componentes que realmente precisam de interatividade como 'use client'. O restante pode ser Server Component!

Experimente RSC em seus próximos projetos e veja a diferença! ⚡