# React Server Components na prática: Arquitetura, fluxo de dados e performance Os React Server Components (RSC) representam a mudança de paradigma mais significativa no ecossistema React. Em vez de enviar megabytes de JavaScript para que o navegador monte toda a árvore de componentes, os Server Components executam no servidor e enviam apenas HTML e uma estrutura serializada para o cliente. Essa abordagem resolve diretamente o dilema histórico entre SEO, tempo de carregamento inicial (FCP/LCP) e interatividade fluida. --- ## 1. O modelo mental: O que muda na prática? Em aplicações React tradicionais (SPA), o fluxo comum era: 1. Baixar bundle JS vazio no navegador. 2. Renderizar tela com spinners. 3. Disparar chamadas `fetch` dentro de `useEffect`. 4. Atualizar o estado e re-renderizar. Com **Server Components**: - A consulta aos dados acontece diretamente na renderização do componente no servidor (acessando banco de dados, cache ou microsserviços sem latência de ida e volta ao navegador). - Dependências pesadas utilizadas apenas para formatar dados (como bibliotecas de markdown ou manipulação de datas) **não entram no bundle do cliente**. - O navegador recebe o resultado pronto para exibição imediata. ```tsx // Exemplo de Server Component nativo (assíncrono) import { db } from "@/lib/db"; export default async function ProductCatalog() { // Chamada direta e segura no servidor — zero exposição de credenciais const products = await db.product.findMany({ where: { active: true }, orderBy: { createdAt: "desc" }, }); return (

{products.map((product) => (

{product.name}

{product.formattedPrice}

{/* Componente cliente interativo injetado na folha */}

))}

); } ``` --- ## 2. Quando usar `"use client"`? A diretiva `"use client"` não transforma um componente em um componente de servidor antigo; ela apenas define uma **fronteira de hidratação** onde o código JavaScript precisa ser executado no navegador. ### Utilize `"use client"` para: - Interatividade com ouvintes de evento: `onClick`, `onChange`, `onSubmit`. - Estado local e ciclo de vida: `useState`, `useReducer`, `useEffect`. - APIs exclusivas do navegador: `localStorage`, `geolocation`, `window`. - Bibliotecas visuais interativas (como Framer Motion ou sliders). ### Mantenha como Server Component quando precisar de: - Acesso direto ao banco de dados ou sistemas de arquivos. - Consumo de chaves de API secretas. - Redução de tamanho de bundle em telas orientadas a conteúdo. --- ## 3. Streaming de UI com `` Uma das maiores vantagens dos Server Components é a capacidade de fazer streaming de partes lentas da página sem bloquear a renderização dos blocos rápidos: ```tsx import { Suspense } from "react"; export default function DashboardPage() { return (

{/* O Header renderiza instantaneamente, enquanto as métricas pesadas fazem streaming */} }>

); } ``` ## Conclusão Server Components não vieram para substituir os Client Components, mas para complementá-los. O segredo da alta performance é adotar a estratégia de **ilhas de interatividade**: estruture e alimente a maior parte da aplicação no servidor e reserve o JavaScript do cliente estritamente para o que precisa responder ao toque do usuário.

Tag: Server Components

Todos os artigos

React Server Components na prática: Arquitetura, fluxo de dados e performance

Tags populares

Busca Global e Comandos