Server Components vs. Client Components

By default, every component in the App Router is a Server Component — it renders on the server and ships plain HTML to the browser, with no extra JavaScript sent down for that component at all.

Example: opting into interactivity

"use client";
import { useState } from "react";

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

Add "use client" at the very top of a file to opt into a Client Component instead, for anything that needs real browser interactivity — state, event handlers, browser-only APIs like localStorage. React's useState and useEffect only work in Client Components; a plain Server Component can't use them at all, since they depend on code actually running in the browser.

Why this split is worth the extra decision

Every component you don't mark as a Client Component ships zero extra JavaScript to the visitor's browser — real performance benefit at scale, especially on slower connections and devices. The practical rule of thumb: default to a Server Component, and only add "use client" to the specific, usually small components that genuinely need interactivity — not the whole page just because one button on it needs a click handler.