React Server Components
A new kind of React component that runs only on the server. It can read databases, hold secrets, and render HTML, but it never gets shipped to the browser. Interactivity is added surgically with small "use client" islands.
Fetched directly from the server. This table is plain HTML, open the page source and you'll find these numbers baked in.
| Metric | Value |
|---|---|
| users | 12,482 |
| sessions | 3,117 |
| errors | 4 |
No JavaScript executes in the browser for this content, it's plain HTML (plus a small RSC payload that lets Next.js navigate without re-rendering this part).
The counter ships as JavaScript and only becomes interactive after hydration. The 'Interactive' indicator confirms it.
What happens
- Server render,the async page runs on the server, awaits the “DB” call, and renders the table directly into HTML.
- Client island marker, the
<Counter>import is recognised as a Client Component because of its"use client"directive. - Bundle, Next.js sends HTML for the whole page, plus a JS bundle for just the Counter (and its dependencies).
- Hydrate, on the client, React attaches handlers to the counter. The server-only content stays as inert HTML.
The code
// app/rendering/rsc/page.tsx, Server Component
import { Counter } from "./_components/Counter"; // a 'use client' island
export default function Page() {
const data = fakeDb(); // runs on the server, no JS shipped
return (
<>
<ServerPanel rows={data.rows} />
<Counter initial={data.start} /> {/* hydrates in the browser */}
</>
);
}
// _components/Counter.tsx
"use client";
import { useState } from "react";
export function Counter({ initial }: { initial: number }) {
const [count, setCount] = useState(initial);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Why it matters
With RSC, you only pay the JavaScript cost for the parts of the page the user actually interacts with. A 500-row dashboard with one filter dropdown ships the dropdown, not the table-rendering code. That's how Next.js apps stay fast even as they grow.