React Server Components

The Costs & The Benefits

Who am I Anyway?

  • Made websites @ HashiCorp
  • Next.js eng manager @ Vercel
  • Now working @ Clerk

Zooming out on React Architectures

Because I'm not that smart and need lots of context 😅

Pure Client React (SPA)

  • client-side only
  • use browser apis with impunity
  • don't deal with servers

The Downsides:

  • SEO is bad
  • initial load is slow

Server Rendered React (SSR)

  • runs on client & server
  • initial load becomes fast, SEO is great

The Downsides:

  • the same code needs to run in browser & node.js
  • you need to figure out hydration
  • you need to run & manage an actual server

React Server Components

  • faster rendering with streaming
  • parallel, non-blocking data loading by default
  • more control and granularity for caching
  • hydrate only what is needed

The Downsides:

  • server-only rendering is an entirely new render environment
  • you must be in control of what hydrates and doesn't
  • server/infra does more work, possible downside
  • it's still pretty beta-ish

The Rocky Path to RSC

âž• New Rendering Environment (server only)

âž• Different rendering environments can be mixed

React Server Components

  • faster rendering with streaming
  • parallel, non-blocking data loading by default
  • hydrate only what is needed
  • more control and granularity for caching (demo incoming)

RSC is good for apps with complex data loading needs at scale

💖