SPA vs SSR
Share a link to a Trailhead trail in a chat app and it shows a preview card with the trail name and photo. That only works if the page's HTML already contains them when the chat app fetches it. Whether it does depends on one question: is the page built in the browser or on the server?
The rule
SPA ships an empty shell; SSR ships the finished page, then wakes it up.
A single-page app (SPA) sends almost nothing in its first response:
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>The browser downloads the JavaScript, runs it, fetches the trail data, and only then draws the page. After that, the app stays loaded: clicking a link swaps views in place without asking the server for a new HTML document.
Server-side rendering (SSR) runs the React components on the server and sends the finished HTML:
<body>
<main>
<h1>Misty Ridge Loop</h1>
<p>8.4 km, moderate, 3 hours</p>
</main>
<script src="/app.js"></script>
</body>The visitor sees the content straight away. Then the JavaScript loads and hydrates the page: React attaches event handlers to the HTML that is already there, so buttons start working.
| SPA | SSR | |
|---|---|---|
| First response | Empty shell | Full content |
| Content visible | After JavaScript runs | Immediately |
| Search engines and link previews | May see nothing | See everything |
| Later navigation | Fast, in the browser | Fast too, in Next.js |
Next.js gives you both: the first page arrives rendered from the server, and later navigation happens in the browser like an SPA.
The shortcut
Ask "Who needs to see this page before JavaScript runs?" If search engines, link previews or visitors on slow phones do, render on the server. If it sits behind a login and is mostly interaction, a client-built page is fine.
Public trail pages
Found through search and shared as links. They need HTML up front, so SSR.
The trap is thinking SSR means "no JavaScript". Server-rendered pages still load JavaScript to become interactive. SSR just means the content does not have to wait for it.
Drills
Answer fast — trust the rule.
What does the first HTML response of a typical SPA contain?
What is hydration?
Why do server-rendered pages suit link previews in chat apps?
After the first page loads in a Next.js app, how does clicking an internal link usually behave?
Remember
- SPA ships an empty shell; SSR ships the finished page, then hydrates it.
- Shortcut: "who needs to see it before JavaScript runs?" decides the strategy.
- Trap: SSR pages still use JavaScript; the content just does not wait for it.