What is React Server Components?

React Server Components (RSC) split an app into two kinds of components. Server Components run on the server, at build time or per request. They can be async, read databases and files directly, and their code never ships to the browser. Client Components are the familiar kind: they also render on the server for the initial HTML, then hydrate and run in the browser with state, effects and event handlers. The Next.js App Router made Server Components the default, and React 19 documents them as stable for frameworks to build on.

How it works

A "use client" directive at the top of a file marks a boundary: that file and everything it imports become client code. Server Components can render Client Components and pass them props, and those props must be serializable: strings, numbers, plain objects, arrays, dates, promises and JSX, but not ordinary functions. The server streams a serialized tree to the browser, where React merges it with the client parts.

import { getPlans } from "@/lib/db"
import { PricingToggle } from "@/components/pricing-toggle" // a "use client" file

export default async function PricingPage() {
  const plans = await getPlans()
  return (
    <section>
      <h1>Pricing</h1>
      <PricingToggle plans={plans} />
    </section>
  )
}

Why it matters

• Less JavaScript. Markdown rendering, syntax highlighting and data formatting can run on the server with no bundle cost.
• Direct data access. No API route just to feed your own UI, and secrets stay on the server.
• Streaming. With Suspense, slow data shows a fallback while the rest of the page is already visible.

Common pitfalls

• Using useState, useEffect, context or browser APIs in a file without "use client". The build fails with an error pointing at the hook.
• Putting "use client" at the top of a layout, which pulls its whole import graph into the client bundle. Push the boundary down to the smallest interactive leaf.
• Passing an onClick handler from a Server Component to a Client Component. Plain functions cannot be serialized.
• Confusing "use server" with Server Components. "use server" marks Server Functions that client code can call, not components.

How MiniDev UI fits

Interactive MiniDev components start with "use client", so you can import them straight from a Server Component page and only those leaves ship to the browser. Purely presentational pieces such as Card carry no directive and can render entirely on the server. Fetch data in the server page and pass results down as props, as the Next.js SaaS dashboard guide shows.