What is a Single Page Application (SPA) and how does client-side routing work?
Options
- One HTML page; JS swaps the view and URL, no reload (Correct option)
- A site that is made of one single file on a server
- A page that is built without using any JavaScript
- A page that reloads completely on every single click
Answer
The browser loads one HTML page and JavaScript; navigation changes the view and URL (History API) without a full page reload, fetching data from APIs as needed
Why
In a traditional multi-page site, each link asks the server for a new HTML page. In an SPA (React with React Router, Angular, Vue), the first load brings the app; afterwards the router changes the URL with the History API and renders another component, with no full reload. Data comes from REST/JSON APIs.
Benefits: fast, app-like feel. Drawbacks: larger first load, SEO and initial-render concerns (solved by SSR or static generation, e.g. Next.js).
The server must send index.html for unknown paths so deep links work.
Remember
SPA = one page, JS swaps views, data from APIs.