SPA: Single-Page Application
A Single-Page Application loads a basic document once, then uses JavaScript to change views and fetch data without reloading the whole page.
What you will learn
- How a SPA changes content without a full reload
- What APIs and client-side routing do
- How to plan for initial loading, search, and accessibility
How a SPA works
- The browser loads the application shell.
- JavaScript starts and renders the first view.
- The app requests data from an API.
- Navigation changes the view and URL while the document stays loaded.
Common building blocks
- JavaScript framework or library
- React, Vue, Angular, or a smaller custom solution.
- API communication
- REST or GraphQL endpoints that provide data.
- Routing
- A system that maps a URL to a view and supports the browser's history.
Strengths and trade-offs
- After startup, navigation can feel smooth and app-like.
- Only changed data or views need to be updated.
- The first useful view may be slow while scripts and data load.
- Provide meaningful loading states, keyboard navigation, shareable URLs, and a fallback when JavaScript fails.