As 5 Formas de Buscar Dados em React Server Components e TanStack

Renderizar no Server não é novidade

React faz SSR desde sempre. Antes do Next.js ganhar hype, já existia renderização no lado do servidor e o React sempre foi isomórfico: pode rodar tanto no cliente quanto no servidor. A novidade dos Server Components não é o render, mas as novas possibilidades de composição e entrega.

TanStack Start e cinco formas de buscar dados

Com o TanStack Start, você tem CINCO padrões distintos para obter dados em uma página React. Cada um equilibra interatividade, performance e SEO de um jeito único. O melhor: todo código de exemplo está liberado no GitHub. Explore e teste essas variações agora!

1. Client-side Rendering (CSR): o clássico SPA simplificado

O fetch acontece após o JS chegar ao navegador

Na abordagem CSR, a API é chamada já no navegador. O TanStack Start facilita isso: basta definir SSR=false na configuração da rota. Você ganha uma SPA clássica, com experiência leve e responsiva. O loader roda no client; use router.useLoaderData para acessar os dados.

2. Server-side Rendering (SSR): HTML pronto e ciclo de hidratação

SSR padrão: renderiza HTML no server, hidrata no cliente

Aqui, o SSR é habilitado (default, ou SSR=true ). Ao acessar a página, o server processa o loader, pega os dados, monta o HTML e manda para o navegador. Depois, React hidrata o app para reatividade total. Isso entrega conteúdo mais rápido e indexável.

3. Data-only SSR: dados entregues pelo server, render no client

O server busca e injeta apenas os dados

Em Data-only SSR, o loader busca os dados no server e os passa, mas o HTML em si gera só um app “vazio” no início. Assim que a JS bundle hidrata, o React monta os dados. O usuário vê um leve flash ao renderizar. Útil para dashboards, já que o dado nunca viaja direto do client.

4. React Server Components (RSC): compondo no server, enviando fragmentos para o client

A API mais flexível do React moderno

Com RSC, componentes funcionam apenas no server: podem buscar dados com await , compor Outputs otimizados e enviar “fragmentos renderizáveis” para o client. O TanStack Start permite usar RSC de duas formas: direta (Low Level API) ou compondo estruturas (Composite). Tudo tipado, assíncrono e com suporte total ao fetch server-side.

5. RSC Composite Components: slots, layout e arquitetura dinâmica

Composição avançada, slots e client interativos sob demanda

No modelo Composite, você cria um componente de caixa genérico (slot) e injeta funções, children e até componentes “client” interativos dentro da estrutura server. Monte seu próprio layout, defina seções dinâmicas, use quantos slots quiser. O loader orquestra todo ciclo, inclusive quais dados ou elementos devem ser enviados já montados.

Combinando abordagens: liberdade para arquitetar

Nada te impede de misturar SSR, Data-only, CSR e RSC na mesma aplicação. O TanStack Start facilita composições, duplicação seletiva de render, fetches e slots. Decida com base na página: SEO, velocidade, segurança ou interação.

SSR sempre foi possível — só ficou mais fácil

Antes do Next.js, todo projeto React precisava improvisar o SSR. O Next padronizou. RSC adicionou fragmentação real, sem hidratação, e o TanStack Start unificou todas as possibilidades sob APIs tipadas. A arquitetura agora é escolha e não imposição.

Não caia em armadilhas: diferenças críticas entre SSR e RSC

SSR produz HTML já renderizado (bom para SEO, mas traz duplo trabalho de render). RSC executa lógica apenas no server, sem hidratar tudo no client, mas limita o uso de hooks do lado client. Entenda as limitações antes de trocar seu stack.

Recomendações práticas: quando usar cada padrão

Use SSR padrão para landing pages, portais de conteúdo, eCommerce. Data-only para painéis e dados sensíveis. CSR para SPA’s rápidas sem SEO. RSC e slots composite para apps “Next-gen”, CMS, dashboards e projetos que pedem composição inteligente de layouts e dados.

Pontos críticos ao migrar do SSR tradicional para RSC

Migrar exige modularidade, separar responsabilidades e dominar renderização assíncrona. Teste muito bem a compatibilidade de dependências, behavior de hydration e divisão de código entre server/client.

Experimente: TanStack Start na prática

Está tudo open-source! O código desses exemplos (SSR, CSR, Data-only, RSC normal e Composite) está disponível no GitHub oficial. Teste cada arquivo, faça benchmarks do que muda carregando a lista de Pokémon via API real. Só assim você sente de verdade os ganhos arquiteturais.

Torne sua stack preparada para o amanhã

Combine as arquiteturas apresentadas, documente cada decisão, e garanta performance, segurança e flexibilidade para evoluir junto do React. Hoje, dominar SSR e RSC é diferencial — amanhã, será commodity.

Assista mais sobre TanStack Start e arquitetura RSC no canal Dev Doido

Para explorar diferenças profundas entre SSR, CSR e RSC no TanStack Start, assista ao canal Dev Doido no YouTube — vídeos diretos, sem enrolação, com código real e dicas do mundo prático React. Veja agora e acabe com as dúvidas de vez.