Single-Page Application (SPA)
A Single-Page Application (SPA) is a web application that loads a single HTML document on first visit and thereafter updates the UI dynamically via JavaScript — without triggering full page reloads from the server. Navigation between “pages” is handled client-side by a router (e.g. react-router) that intercepts URL changes and swaps out view components.
How It Works in the burgerApp
The Burger Builder is a classic SPA:
public/index.html— a single HTML shell with<div id="root">.src/index.js— mounts the react component tree into#root.BrowserRouterintercepts all navigation events;Switch/Routedecides which container to render.- No page reload occurs when navigating
/→/checkout→/orders.
Trade-offs
| Benefit | Cost |
|---|---|
| Fast subsequent navigation (no full reload) | Larger initial JavaScript bundle |
| Rich interactivity, app-like feel | Requires client-side routing complexity |
| Backend can be a pure API | SEO requires extra work (SSR or pre-rendering) |
| Easier to manage global state (e.g. redux) | Initial page may be slow on slow networks |
See Also
- react — the library powering the burgerApp SPA
- react-router — client-side routing
- redux — global state management within an SPA
- schwarzmuller-2021-react-burger-app — source repo