What is React Server Components (RSC)?

React Server Components are a React rendering primitive in which components execute exclusively on the server and never ship JavaScript to the client. They produce serialized UI that is streamed to the browser and interleaved with traditional client components for interactivity. For composable-commerce storefronts, RSC is the most impactful shift in React since hooks.

Definition

In an RSC-enabled framework like Next.js App Router or the experimental SvelteKit and Remix variants, components are categorized as server or client. Server components can fetch data directly from databases, commerce APIs or a content-management-system-cms with the file system or fetch APIs, return a serialized React tree and are tree-shaken from the client bundle entirely. Client components, marked with use client, remain interactive and ship as first-party-JS. The framework composes the two during streaming-ssr, sending the static parts immediately and the interactive islands afterward. This naturally aligns with edge rendering and modern cache-layer primitives.

Why it matters

The biggest cost in modern React storefronts is the size of the client bundle and the resulting hydration work, both of which hurt INP. RSC moves data fetching, templating and even heavy formatting libraries to the server, leaving only truly interactive components in the client. Bundle sizes on PDPs and PLPs commonly drop by 40 to 70 percent. Because server components stream HTML, LCP improves as well. RSC also simplifies data access: instead of fetching in useEffect, components await data in render, which removes client-side waterfalls.

Use cases

Composable-commerce teams on Next.js move their product listing, category description, faceting and SEO content to server components, while keeping cart, variant pickers, mini PDP modules and personalization-driven blocks as client components. Server components colocate calls to a storefront-api, a search service, the recommendation-engine and the CMS, and benefit from request memoization at the cache-layer. Edge Rendering on Vercel Edge or Cloudflare Workers lets RSC trees be produced close to the user. Combined with islands-architecture thinking, RSC offers the cleanest model for shrinking first-party-JS while keeping rich interactivity where it matters.

Related

Explore Composable Headless Frontend · Performance and Core Web Vitals.