Rendering on the server: the big idea

Where does the HTML come from?

Compare what the browser receives for the same 'About us' page.

Plain React SPA. The server sends a shell, and content appears only after the bundle runs:

<div id="root"></div>
<script src="/bundle.js"></script>

Next.js. The server runs your component first and sends the result:

<h1>About us</h1>
<script src="/chunk.js"></script>

Same component, radically different first impression. The Next.js user sees content immediately, and the crawler sees real HTML. This is server-side rendering (SSR) in its simplest form: run React on the server, ship HTML.

Hydration: waking the page up

Server-rendered HTML arrives with no event listeners attached: click handlers, useState, and effects all require JavaScript running in the browser, and none has run yet. The page looks right but nothing responds — a photograph of your app rather than the app itself.

So after the HTML arrives, Next.js downloads the JavaScript for the interactive parts and hydrates them: React attaches event listeners and takes over the already-rendered DOM instead of rebuilding it. Think of it as the HTML arriving frozen, then thawing into a live React app.

Two consequences you will meet again in Unit 3:

• Content can be visible before it is interactive.
• Only components that actually need interactivity have to ship JavaScript to the browser at all.

Recall: you rendered on a server before

This should feel familiar from Backend with Node.js: your Express handlers built responses on the server and sent them to the browser. Next.js does the same thing, except the 'template' is a React component tree, and the framework handles the second act (hydration) automatically.

The mental model to carry forward:

1. Request comes in. Next.js runs your React components on the server.
2. HTML goes out. The user sees content fast, and crawlers are happy.
3. JavaScript follows. Interactive parts hydrate and come alive.

In Unit 3 you will learn that step 3 is optional per component. That is the core idea behind server and client components.