Rendering Modes Comparison

Compare different rendering approaches across key metrics

Rendering Modes Comparison Table
TechniqueIntroducedInitial SpeedSEO PerformanceDynamic ContentServer LoadUse CasesKey Trade-offs
CSR
Client-Side Rendering
Traditional | Remix 2.17.2 | TanStack Start 1.0 RCSlowPoorHighLow
SPAs, Games, Dashboards
Poor initial SEO/TTFB; high client CPU.
SSR
Server-Side Rendering
Traditional | Remix 2.17.2 | TanStack Start 1.0 RCFastGreatMediumHigh
E-commerce, Profiles, Real-time data
Higher server load/latency per request.
SSG
Static Site Generation
Next.js 9 | Remix 2.0 (via cache) | TanStack Start 1.0 RCFastGreatLowNone
Blogs, Docs, Marketing
Stale data until rebuild.
ISR
Incremental Static Regeneration
Next.js 9.5 | Remix 2.0 (via cache) | TanStack Start 1.0 RC (custom)FastGreatMediumLow
Catalogs, News, Product listings
Brief staleness; revalidation overhead.
RSC
React Server Components
Next.js 13 | Remix 2.17.2 | TanStack Start 1.0 RC (planned)OptimalGreatHighBalanced
Modern apps, Data-heavy, Secure apps
Interactivity split; hydration step.
STREAMING
Streaming
Next.js 13 | Remix 1.15 | TanStack Start 1.0 RCFastGoodHighMedium
Dashboards, Real-time, Progressive apps
Incremental UI; fallback UX needed.
PPR
Partial Prerendering
Next.js 14.1 | Remix N/A | TanStack Start N/AOptimalGreatHighBalanced
Hybrid apps, Optimal perf, Modern pages
Suspense complexity; browser buffering delays.
Key Takeaways

Static Content

Use SSG for content that doesn't change often

  • β€’ Blogs and documentation
  • β€’ Marketing pages
  • β€’ Portfolio sites

Dynamic Content

Use SSR for real-time or user-specific content

  • β€’ E-commerce product pages
  • β€’ User profiles
  • β€’ Real-time dashboards

Hybrid Approach

Use ISR, RSC, or PPR for optimal performance. Can mix strategies per-page.

  • β€’ Product catalogs
  • β€’ News sites
  • β€’ Modern web apps
  • β€’ Per-page strategy selection