React Server Components 🌐

React Server Components (RSC) let you render portions of the tree on the server, stream them to the client, and hydrate only what truly needs browser APIs. Frameworks like Next.js App Router bake this in.

1) Server vs Client Components 🧠

Server components run on the server, can access databases/files directly, and never ship their code to the client.
Client components run in the browser, can use state/hooks, and bundle client-only libraries.


// Server component
export default async function ProductsPage() {
  const products = await db.products.findMany();
  return (
    <section>
      <ProductsList products={products} />
      <ClientCart />
    </section>
  );
}
 
// Client component
"use client";
export function ClientCart() {
  const [items, setItems] = useCart();
  return <CartDrawer items={items} />;
}

Boundary defined via "use client" directive (Next.js) or file conventions.

2) Serialization Boundaries 📦

Data flowing from server to client must be serializable (JSON-like structures plus special React references).
Cannot pass functions or class instances across the boundary; instead, pass primitives or objects.
Server components can render client components by including them in JSX; React handles wiring props over the network.

3) Bundle Size Implications 📉

Server components never enter client bundles, reducing shipped JS.
Heavy libraries (MDX parsing, markdown transforms) stay server-only.
Client components remain as lean as possible—only include code that touches browser APIs.

🧱 Treat RSC as a way to move logic up the stack: data fetching, auth checks, and rendering heavy markup server-side.

4) Streaming & Partial Rendering 🚰

RSC supports streaming responses via renderToReadableStream or framework primitives.
Suspense boundaries allow sending the page shell instantly, then streaming nested server/client content as it resolves.
Next.js App Router exposes this via loading.js (skeletons) plus automatic chunked streaming.

Flow

Server component starts rendering.
Data awaited → React streams placeholders.
As data resolves, React flushes serialized payloads; client hydrates needed parts.

Key Takeaways ✅

Separate concerns: server components fetch + render data, client components handle interactivity.
Serialization boundaries restrict what crosses server→client; plan data structures accordingly.
RSC shrinks bundles and improves TTFB via streaming.
Frameworks (Next.js, Remix soon) provide ergonomics around file routing, caching, and deployment.

Recap 🔄

React Server Components mix SSR efficiency with SPA interactivity: render heavy work on the server, stream UI progressively, and limit client bundles to interactive islands. Embrace the server/client split to build faster, more maintainable apps.