React 19 e Server Components: cortando JavaScript do cliente

O React 19 trouxe mudanças estruturais que impactam diretamente a performance das aplicações web. O principal vetor de melhoria sao os Server Components, que permitem renderizar componentes no servidor sem enviar seu JavaScript para o navegador.

O problema: JavaScript demais no cliente

Uma aplicacao React tipica carrega um bundle que inclui componentes de UI, logica de estado, utilitarios de formatacao e codigo de busca de dados. Em projetos de media complexidade, esse bundle facilmente ultrapassa 200 KB gzipped.

O impacto nos Core Web Vitals e direto:

• LCP (Largest Contentful Paint) sofre porque o navegador precisa baixar, parsear e executar JavaScript antes de renderizar o conteudo principal.
• TTI (Time to Interactive) e afetado porque a interatividade depende da hidratacao completa da arvore de componentes.
• INP (Interaction to Next Paint) piora porque mais JavaScript significa mais trabalho na main thread durante a interacao.

Server Components: o antes e depois

Antes: tudo no cliente

// components/ProductList.tsx
import { useState, useEffect } from 'react';
import { formatPrice } from '../utils/format';
import { fetchProducts } from '../api/products';

export function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts().then(setProducts);
  }, []);

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{formatPrice(product.price)}</p>
        </div>
      ))}
    </div>
  );
}

Nesse cenario, o cliente recebe: o componente, o useState, o useEffect, a funcao fetchProducts, a funcao formatPrice e faz uma requisicao adicional para buscar dados.

Depois: Server Component

// app/products/page.tsx (Server Component - padrao)
import { formatPrice } from '../utils/format';
import { db } from '../db';

export async function ProductList() {
  const products = await db.product.findMany();

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{formatPrice(product.price)}</p>
        </div>
      ))}
    </div>
  );
}

O resultado: zero JavaScript enviado ao cliente para esse componente. A busca no banco roda no servidor, a formatacao roda no servidor, e o cliente recebe apenas HTML.

Impacto real nos Core Web Vitals

Medindo uma pagina de listagem de produtos com ~50 itens, os numeros falam por si:

Esses dados foram coletados em uma conexao 4G tipica do Brasil (~10 Mbps), simulando o perfil de usuario mobile predominante no mercado nacional.

Quando usar Server vs Client Components

A regra e simples: comece com Server Components e migre para Client apenas o necessario.

Server Components sao ideais para:

• Busca de dados (database, APIs, filesystem)
• Acesso a recursos exclusivos do servidor (env vars, secrets)
• Renderizacao de conteudo estatico ou semi-estatico
• Componentes pesados de formatacao ou transformacao de dados

Client Components sao necessarios para:

• Interatividade (event handlers, estado local)
• Hooks do navegador (useState, useEffect, useRef)
• Animacoes que dependem do DOM
• Componentes que usam APIs do browser (IntersectionObserver, WebRTC)

Padrao pratico: composicao de fronteiras

A abordagem mais eficaz e compor Server Components com Client Components em fronteiras bem definidas:

// app/dashboard/page.tsx (Server Component)
import { getMetrics } from '../services/metrics';
import { Chart } from '../components/Chart'; // Client Component
import { MetricCard } from '../components/MetricCard'; // Server Component

export async function Dashboard() {
  const metrics = await getMetrics();

  return (
    <div>
      {/* Server Component: sem JS no cliente */}
      <MetricCard title="Receita" value={metrics.revenue} />

      {/* Client Component: apenas o Chart vira JS */}
      <Chart data={metrics.chartData} />
    </div>
  );
}

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

import { useState } from 'react';
import { LineChart } from 'recharts';

export function Chart({ data }) {
  const [period, setPeriod] = useState('7d');

  return (
    <div>
      <select onChange={(e) => setPeriod(e.target.value)}>
        <option value="7d">7 dias</option>
        <option value="30d">30 dias</option>
      </select>
      <LineChart data={data[period]} />
    </div>
  );
}

Esse padrao garante que apenas o componente interativo (Chart) envia JavaScript ao cliente. Todo o resto — busca de dados, metricas estaticas — roda exclusivamente no servidor.

Consideracoes para deploy no Brasil

Para o publico brasileiro, otimizar o bundle nao e luxo, e necessidade. Dados do Cetic indicam que quase 40% dos acessos mobile ainda ocorrem em conexoes 4G com latencia alta. Cada KB de JavaScript a menos se traduz em usuarios que conseguem usar a aplicacao.

Alem disso, o modelo de Server Components se alinha bem com estrategias de edge computing, que reduzem a latencia servindo conteudo de pontos de presenca mais proximos ao usuario.

Conclusao

O React 19 consolida os Server Components como parte fundamental do ecossistema. Nao se trata de uma feature experimental — e o padrao de arquitetura recomendado. Ao mover renderizacao e busca de dados para o servidor, voce reduz drasticamente o JavaScript enviado ao cliente e melhora todas as metricas de performance que importam para SEO e experiencia do usuario.

Se voce esta comecando um projeto novo, use Server Components por padrao. Se esta migrando um projeto existente, identifique os componentes que nao precisam de interatividade e migre-os primeiro. Os numeros nos Core Web Vitals vao mostrar o impacto desde o primeiro deploy.