Compare diferentes abordagens de renderização em métricas-chave
| Introdução | Velocidade Inicial | Performance SEO | Conteúdo Dinâmico | Carga do Servidor | Casos de Uso | Trade-offs Principais | |
|---|---|---|---|---|---|---|---|
CSR Client-Side Rendering | Tradicional | Remix 2.17.2 | TanStack Start 1.0 RC | Lento | Ruim | Alto | Baixo | SPAs, Jogos, Dashboards | SEO inicial ruim/TTFB; alto uso de CPU do cliente. |
SSR Server-Side Rendering | Tradicional | Remix 2.17.2 | TanStack Start 1.0 RC | Rápido | Ótimo | Alto | Alto | E-commerce, Perfis, Dados em tempo real | Maior carga do servidor/latência por requisição. |
SSG Static Site Generation | Next.js 9 | Remix 2.0 (via cache) | TanStack Start 1.0 RC | Rápido | Ótimo | Baixo | Nenhum | Blogs, Documentação, Marketing | Dados desatualizados até rebuild. |
ISR Incremental Static Regeneration | Next.js 9.5 | Remix 2.0 (via cache) | TanStack Start 1.0 RC (custom) | Rápido | Ótimo | Médio | Baixo | Catálogos, Notícias, Listagens de produtos | Breve desatualização; overhead de revalidação. |
RSC React Server Components | Next.js 13 | Remix 1.15 | TanStack Start 1.0 RC | Ótimo | Ótimo | Alto | Equilibrado | Apps modernos, Apps com muitos dados, Apps seguros | Divisão de interatividade; passo de hidratação. |
STREAMING Streaming | Next.js 13 | Remix 1.15 | TanStack Start 1.0 RC | Rápido | Bom | Alto | Médio | Dashboards, Tempo real, Apps progressivos | UI incremental; fallback UX necessário. |
PPR Partial Prerendering | Next.js 14.1 | Remix N/A | TanStack Start N/A | Ótimo | Ótimo | Alto | Equilibrado | Next.js 16+, Apps híbridos, Performance ótima | Complexidade do Suspense; atrasos de buffer do navegador. |
Use SSG para conteúdo que não muda frequentemente
Use SSR para conteúdo em tempo real ou específico do usuário
Use ISR, RSC ou PPR para performance otimizada