Single Page Application (SPA)
A web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
Detailed Explanation
SPAs provide a seamless user experience by only fetching the data needed for the next 'view' and updating the DOM in place. This avoids the 'flash' of a page reload. Popular frameworks like React, Vue, and Angular are primarily used to build SPAs. While they offer high performance after the initial load, they require careful routing management and SEO optimization.
Quick Summary
A single-page application loads one HTML document and rewrites parts of the page in place as the user navigates. Routing, data fetching, and view transitions all happen on the client, giving app-like fluidity at the cost of a heavier initial load.
Key Takeaways
- The browser never does a full page reload during normal SPA navigation; the URL changes via the History API.
- Client-side routing means deep links must be handled by the server with a catch-all that returns the SPA shell.
- SPAs need explicit loading and error states because the server's HTTP status never changes between routes.
- SEO requires SSR, SSG, or pre-rendering, pure SPAs are an unsolved problem for non-Google crawlers.
- State management (Redux, Zustand, Pinia) becomes meaningful because state lives in memory across views.
When to use it
- Productivity apps and dashboards where users stay engaged for minutes or hours.
- Interactive editors (Figma, CodeSandbox) where preserving in-memory state across navigation is essential.
- Mobile-app-like experiences that need offline support via service workers.
- Internal tools where SEO is irrelevant and bundle size is a one-time cost paid by every employee.
Common Mistakes
- Not handling browser back/forward buttons properly with the History API.
- Forgetting to scroll to top on route change so the new view appears halfway down.
- Leaking state across routes by storing it in module-level variables instead of in proper state managers.
- Shipping every route's code in the initial bundle instead of code-splitting per route.
Single Page Application (SPA), Frequently Asked
Are SPAs dead now that SSR is back?
No. Modern frameworks (Next.js, Nuxt, SvelteKit, Remix) hybridise, server-rendered first paint plus SPA-style navigation after hydration. The pure SPA model is rarer but still right for authenticated apps.
How do SPAs handle SEO?
They either render server-side, pre-render at build time, or rely on Google's renderer. The last option is fragile and excludes non-Google crawlers (Bing, social previews, AI bots), so SSR/SSG is the safe default.
What is the difference between an SPA and a PWA?
An SPA is an architecture (one page, client routing). A PWA is a set of capabilities (offline support, installability, push notifications) layered on top of any web app. Many PWAs are SPAs, but the two concepts are independent.