What is a Single-Page Application?
Learn what a single-page application (SPA) is, how client-side routing works, and the key trade-offs vs traditional multi-page sites.
Expected Interview Answer
A single-page application (SPA) loads one HTML shell up front and then rewrites the page in the browser with JavaScript, fetching only data — not full new pages — from the server as the user navigates.
Instead of requesting a fresh HTML document for every route, an SPA ships a JavaScript bundle that owns rendering: a client-side router intercepts navigation, swaps components in and out, and calls APIs to fetch just the data needed for the new view. This avoids full-page reloads, so transitions feel instant and application state (open modals, scroll position, form input) survives navigation. The trade-offs are a larger initial JavaScript payload, extra work to get SEO and first-paint performance right, and the need to manually manage browser history so back and forward buttons still work.
- Fast, app-like navigation without full page reloads
- State persists smoothly across route changes
- Clear separation between backend APIs and frontend rendering
- Enables rich, interactive UI patterns hard to do with server-rendered pages
AI Mentor Explanation
A single-page application is like a stadium scoreboard that never gets rebuilt between overs — only the numbers on it change. The physical board (the HTML shell) stays put while the operator updates the score, batter name, and overs remaining by swapping digits, not replacing the whole structure. Fans never see the board go dark and reappear; they just see the relevant panels refresh. That is exactly how an SPA updates the DOM in place instead of reloading the whole page for every new piece of information.
Step-by-Step Explanation
Step 1
Load the app shell once
The server sends a minimal HTML file plus a JavaScript bundle on first load.
Step 2
Bootstrap the client router
JavaScript takes over navigation, intercepting link clicks and history changes.
Step 3
Fetch data, not pages
Route changes trigger API calls that return JSON, not new HTML documents.
Step 4
Re-render in place
The framework updates the DOM to reflect new state without a full page reload.
What Interviewer Expects
- Clear contrast with traditional multi-page, server-rendered navigation
- Understanding that only one HTML shell loads, then JS drives the rest
- Awareness of SEO and initial load performance trade-offs
- Mention of client-side routing and history management
Common Mistakes
- Confusing SPA with any JavaScript-heavy site regardless of navigation model
- Forgetting that SPAs still need server APIs for data
- Ignoring SEO and first-contentful-paint implications
- Not mentioning client-side routing as the key mechanism
Best Answer (HR Friendly)
“A single-page application loads once and then updates itself in the browser instead of asking the server for a whole new page every time you click a link. It feels fast and app-like because only the data changes, not the entire screen, though teams do need to plan for search engine visibility and initial load speed.”
Code Example
function navigate(path) {
history.pushState({}, "", path);
render(path);
}
async function render(path) {
const view = document.getElementById("app");
if (path === "/users") {
const users = await fetch("/api/users").then(r => r.json());
view.innerHTML = users.map(u => "<div>" + u.name + "</div>").join("");
} else {
view.innerHTML = "<h1>Home</h1>";
}
}
window.addEventListener("popstate", () => render(location.pathname));Follow-up Questions
- How does an SPA handle SEO compared to server-side rendering?
- What is the difference between client-side and server-side routing?
- How would you improve the first-load performance of a large SPA?
- What is code splitting and why does it matter for SPAs?
MCQ Practice
1. What does an SPA typically fetch when the user navigates to a new route?
SPAs fetch data via APIs and re-render the existing page rather than requesting a new HTML document.
2. Which browser API do SPAs commonly use to update the URL without a full reload?
The History API lets SPAs change the URL and manage back/forward navigation without reloading the page.
3. A common downside of SPAs compared to traditional multi-page sites is:
SPAs often ship more JavaScript upfront and need extra work for SEO and first-paint performance.
Flash Cards
What is an SPA? — An app that loads one HTML shell and updates the page via JavaScript instead of full reloads.
What drives SPA navigation? — A client-side router that intercepts links and updates the URL via the History API.
What does an SPA fetch on navigation? — Data (usually JSON) from APIs, not new HTML pages.
Main SPA trade-off? — Faster app-like transitions at the cost of larger initial JS and extra SEO work.