React Server Components: A Nova Era do Desenvolvimento Web

Os React Server Components (RSCs) representam uma das mudanças mais significativas no ecossistema React, permitindo renderizar componentes no servidor de forma nativa e eficiente.

O que são React Server Components?

São componentes React que rodam exclusivamente no servidor. Eles não enviam JavaScript para o cliente, resultando em um bundle final muito menor e um carregamento inicial mais rápido da página.

Diferenças Chave

1. Ambiente de Execução: Rodam no servidor (Node.js), não no navegador.
2. Acesso Direto: Podem acessar diretamente fontes de dados (bancos de dados, APIs internas) sem a necessidade de uma API REST/GraphQL intermediária.
3. Zero JavaScript no Cliente: Por padrão, não adicionam uma linha de JS ao bundle do cliente.

Benefícios dos RSCs

• Performance Aprimorada: Menos JavaScript para baixar e executar no navegador.
• Segurança: Chaves de API e lógicas sensíveis ficam seguras no servidor.
• Melhor Experiência de Desenvolvimento: Acesso direto a dados simplifica o código.
• Carregamento Mais Rápido: O HTML já chega pré-renderizado e pronto para ser exibido.

Client Components vs. Server Components

A grande sacada é a interoperabilidade. Você pode mesclar os dois tipos de componentes.

Quando usar cada um?

• Server Components (.js, .jsx, .tsx):

  • Acessar dados do backend.
  • Manter informações sensíveis no servidor.
  • Reduzir o tamanho do bundle do cliente.

• Client Components ('use client'):

  • Usar interatividade (eventos como onClick, onChange).
  • Utilizar estado (useState) e efeitos (useEffect).
  • Acessar APIs do navegador (ex: localStorage).

Exemplo Prático de Código

Um componente de servidor que busca dados diretamente de uma API interna.

// app/posts/page.jsx - Um Server Component por padrão

async function getPosts() {
  const res = await fetch('[https://api.internal/posts](https://api.internal/posts)');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>Últimos Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}