Dev MaxxingIntermediateNext.js90 sec

Server Component

A Server Component in Next.js renders on the server and sends only the resulting HTML to the browser, without shipping its own JavaScript to run client-side.

Mark as completed

Prerequisite: Next.js route

What matters

Because no extra JavaScript is sent for it, using Server Components where interactivity isn't needed reduces the amount of code the browser has to download and run.

Example

A page that only displays fetched blog post content, with no buttons or interactive state, can be a Server Component with zero client-side JavaScript overhead.

Common misconception

A Server Component cannot use browser-only features like state or click handlers; that interactivity requires marking a component as a Client Component instead.

Recall question

What does a Server Component avoid sending to the browser that a Client Component does not?

Keywords and related concepts