Introduction to Server Components

What Server Components Are

A Server Component runs entirely on the server, rendering its output (as a special serialized format) and sending that directly to the browser, rather than sending JavaScript that runs the component in the browser. This means its code (and any dependencies it uses) never needs to be downloaded by the client at all.

Note: Server Components are a good fit for content that doesn't need interactivity, like a blog post's static text or a product description.

Warning: This requires a supporting framework (like Next.js's App Router) — it's not something you enable in a plain Create React App or Vite client-only project.

Example: What Server Components Are

// Run in your local React project (npm install required)
// app/page.js (Next.js App Router — a Server Component by default)
async function getPosts() {
  return [{ id: 1, title: 'Hello World' }];
}
export default async function Page() {
  const posts = await getPosts();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Why Server Components Can't Use Hooks

Hooks like useState and useEffect manage behavior that only makes sense in a running browser — reacting to clicks, re-rendering on state changes. Since a Server Component's code never runs in the browser at all, these hooks have nothing to attach to, so they simply aren't allowed there.

Note: If a piece of UI needs any interactivity (clicks, form inputs, useState), it needs to be a Client Component, not a Server Component.

Warning: Using useState inside a Server Component produces a build-time or runtime error — this isn't just discouraged, it's actually disallowed by the framework.

Marking Interactive Parts as Client Components

Adding 'use client' as the very first line of a file marks that component (and anything it imports) as a Client Component, which CAN use hooks and event handlers, and does get shipped as JavaScript to run in the browser as normal React always has.

Note: Keep Client Components as small and focused as possible (just the interactive button, not the whole page) to maximize how much stays server-rendered.

Warning: Forgetting the 'use client' directive on a file that uses hooks or event handlers causes a build error, since the framework assumes server-only by default.

Example: Marking Interactive Parts as Client Components

// Run in your local React project (npm install required)
'use client';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? 'Liked' : 'Like'}</button>;
}