Mastering React Server Components: A Deep Dive

React Server Components (RSC) represent one of the most significant paradigm shifts in modern web development. By rendering components on the server first, we drastically minimize the amount of JavaScript sent to the client browser.

Why Server Components?

Traditionally, Single Page Applications (SPAs) rendered everything in the browser. This forced users to download massive JavaScript bundles before the page became interactive. RSC divides components elegantly:

• Server Components: Run purely on the server by default. They can fetch databases directly and send zero JavaScript to the browser, significantly accelerating initial page loads.
• Client Components: Explicitly marked with the "use client" directive to enable user interactions, state management, and browser APIs.

Direct Data Fetching Example

One of the best benefits of RSC is the simplicity of fetching asynchronous data right inside the functional component body:

// This component runs entirely on the server!
async function ProductFeed() {
  const res = await fetch("https://api.codecrafters.id/products");
  const products = await res.json();

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(p => (
        <ProductCard key={p.id} item={p} />
      ))}
    </div>
  );
}

The outcome is faster page load times, highly optimized SEO out of the box, and clean, readable codebases.