Two Kinds of Component

Every component you've written so far in this section ran somewhere you may not have noticed: on the server. That's not a special mode you turned on: it's the default, and it's the single biggest idea in Next.js.

There are exactly two kinds of component, and each one buys you something the other can't.

Server components: the default

• They run once, on the server, before the page is sent
• They can be async, so they can await data right inside the component
• They ship no JavaScript to the browser: the user downloads the result, not the code

The catch: by the time the page reaches the browser, a server component is finished. It's a snapshot. It cannot remember anything, react to a click, or change.

Client components: opt in

When you need the page to respond, you opt a file into the browser with one line at the very top:

'use client';

That marks the file as a client component, and only client components may use:

• Hooks: useState, useEffect, and friends
• Event handlers: onClick, onChange, …
• Browser APIs: window, localStorage

Notice the trade. A server component is fast and quiet but frozen. A client component is alive but its code has to be downloaded and run in the browser.

So the question you'll ask about every component from now on is not "which one do I like?" but "does this particular piece need to respond to the user?" If the answer is no (and it usually is), leave it on the server.