React Server Components (RSC) render only on the server — their JavaScript is never sent to the browser. In the App Router, every component is a Server Component by default; you opt into client behavior explicitly.
db ;
() {
users = db..();
(
);
}
Server Components can be async, await data directly, and access server-only resources (database, filesystem, secrets) — because they run on the server. No API layer needed to fetch data, and secrets never reach the client.
The browser receives the rendered HTML/UI, not the component's code or its dependencies. A Server Component that uses a heavy markdown or date library ships none of that library to the browser — dramatically reducing bundle size.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
No interactivity, state, effects, or browser APIs — those require a Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
The pattern: Server Components handle data/structure; embed Client Components only where interactivity is needed ("islands").
Server Components are the defining feature of the App Router.
They cut client bundle size (less JS to download/parse), allow direct, secure server-side data access without an API, and improve performance and SEO.
Knowing that they're the default — and what forces a component to be a Client Component — is fundamental to structuring App Router apps efficiently.