CSR and the SPA
Every web page has to become HTML somewhere. The question this section answers is where and when. The first option is the one plain React apps use: let the visitor's browser do all the work. It is called client-side rendering, and knowing its costs explains why Next.js exists.
The rule
CSR: the browser builds the page after the JavaScript arrives.
With client-side rendering (CSR), the server sends a nearly empty HTML file. Everything else happens in the browser, in order:
- Download the HTML shell.
- Download the JavaScript bundle.
- Run it; React starts.
- Fetch the data, for example
GET /api/trails. - Render the trail list.
A single-page app (SPA) is an app built this way end to end: one HTML document for the whole visit, with JavaScript swapping screens as the URL changes.
In Next.js you still use CSR for pieces of a page: a client component that fetches its data in the browser after it loads.
"use client";
import { useEffect, useState } from "react";
export function LiveConditions({ slug }: { slug: string }) {
const [text, setText] = useState("Loading conditions…");
useEffect(() => {
fetch(`/api/trails/${slug}/conditions`)
.then((r) => r.json())
.then((d) => setText(d.summary));
}, [slug]);
return <p>{text}</p>;
}| Strength | Cost |
|---|---|
| After loading, moving between screens is quick | Nothing useful appears until JavaScript and data have both arrived |
| The server only serves files and an API | Crawlers that do not run JavaScript see an empty page |
| Good for highly interactive, private screens | Big bundles hurt slow phones most |
The shortcut
Count the round trips before content appears. CSR needs at least three in a row: HTML, then JavaScript, then data. Each one waits for the previous. If the content matters in the first second, or to a search engine, that chain is too long.
Is it private or public?
Public, but it changes minute to minute and is not what people search for.
The trap is making a whole public page client-rendered because one widget needs live data. Render the page on the server and use CSR only for the widget.
Drills
Answer fast — trust the rule.
With pure CSR, when does the visitor first see the trail list?
What defines a single-page app?
Which Trailhead feature suits client-side rendering best?
How many sequential fetches does pure CSR need before data-driven content appears?
Remember
- CSR: the browser builds the page after JavaScript and data arrive; an SPA works this way end to end.
- Shortcut: count the round trips before content appears.
- Trap: client-rendering a whole public page for the sake of one live widget.