React Server Components Demo

A simple demo to show the performance of the same content rendered using client side, static site generation, and server side methods.

Server-Side Rendering (SSR)

Pages rendered on the server for each request - the production implementation

Performance Metrics

Bundle
~45KB
TTFB
200-500ms
SEO
Excellent
Interactive
Delayed
✓ Advantages
  • • Perfect SEO - full HTML on first load
  • • Fresh data on every request
  • • Good Core Web Vitals
  • • Works without JavaScript
⚠ Considerations
  • • Slower Time to First Byte
  • • Server load on each request
  • • Hydration delay for interactivity

Client-Side Rendering (CSR)

Content rendered entirely in the browser after JavaScript loads

Performance Metrics

Bundle
~120KB
TTFB
50ms
SEO
Poor
Interactive
Immediate
✓ Advantages
  • • Immediate interactivity once loaded
  • • Reduced server load
  • • Rich client-side interactions
  • • App-like experience
⚠ Considerations
  • • Poor SEO without additional setup
  • • Large JavaScript bundle
  • • Blank page until JS loads
  • • Slower on mobile devices

Static Site Generation (SSG)

Pages pre-rendered at build time and served as static files

Performance Metrics

Bundle
~30KB
TTFB
20ms
SEO
Excellent
Interactive
Delayed
✓ Advantages
  • • Blazing fast load times
  • • Excellent SEO
  • • CDN cacheable
  • • Minimal server load
⚠ Considerations
  • • Data can become stale
  • • Requires rebuild for updates
  • • Not suitable for dynamic content

React Server Components

Next.js App Router with React Server Components - the modern approach

Performance Metrics

Bundle
~25KB
TTFB
100ms
SEO
Excellent
Interactive
Selective
✓ Advantages
  • • Smallest JavaScript bundle
  • • Direct database access in components
  • • Automatic code splitting
  • • Streaming and progressive loading
  • • Zero bundle impact for server components
⚠ Considerations
  • • Learning curve for mental model
  • • Requires Next.js 13+ App Router
  • • Some ecosystem compatibility issues