Quiz
Warm-up from 'Layouts and navigating with Link': why does the Link component beat a plain <a> tag for internal navigation?
The split
In Unit 1 you saw that Next.js runs components on the server first. Unit 3 makes that precise, and it is worth precision: this split decides how much JavaScript your users download (the main thing that makes web apps feel slow) and which of your code is allowed near secrets and databases. It is the distinction Next.js code reviews argue about most. In the app directory there are two kinds of React components:
- Server components (the default). They run only on the server. Their JavaScript is never sent to the browser, only the HTML they produce.
- Client components. They render on the server for the initial HTML, then hydrate and keep running in the browser. Anything interactive from the React course,
useState,useEffect,onClick, lives here.
Every component in app/ is a server component until you say otherwise. You opt a file into the client world by putting the directive "use client" on its first line.
What each side can do
| Capability | Server component | Client component |
|---|---|---|
useState, useEffect, onClick | ✗ | ✓ |
async/await data directly in the body | ✓ | ✗ |
| Read secrets, env vars, databases | ✓ | ✗ |
| Ships its JS to the browser | ✗ (HTML only) | ✓ |
Read the last row twice. A page built mostly from server components sends almost no JavaScript, which is the performance win. And because server component code never leaves the server, it can safely hold API keys and query a database, like your Express handlers did in Backend with Node.js.
Quiz
A page is built from 20 server components and 1 client component. Whose JavaScript ends up in the browser bundle?