Single-Page Application
Definition
A single-page application, usually shortened to SPA, is a site whose screens are constructed by JavaScript in the browser. The host sends one document — nearly always index.html — plus a JavaScript bundle. That bundle takes over: it reads the current URL, decides what belongs on screen, and renders it. Click an internal link and the application intercepts the click, swaps the content and updates the address using the browser's History API, with no request for a new document at any point. Projects built with React, Vue, Svelte or Angular are commonly shipped this way. As far as the host is concerned the whole thing is still a folder of static files; the difference is that the interesting work happens after they arrive.
Why It Matters
An SPA feels quick once it has loaded, because moving between screens costs a small data fetch rather than a fresh document, stylesheet and script. It pays for that up front: the first visit must download and execute the bundle before anything appears, and a 600 KB bundle on a mid-range phone over a mobile connection can mean two or three seconds of blank screen. There is also a hosting consequence that catches people out, and it is the reason this term belongs in a hosting glossary. Because the browser does the routing, the host has never heard of any address except the one real file, so a visitor who types or bookmarks a deep link gets a not-found error unless the host is told to return that file anyway. That rule is the SPA fallback, and without it an SPA works perfectly until somebody refreshes the page.
How It Works
The first request returns the single HTML document, which is mostly an empty container plus a script tag. The browser downloads the bundle and the framework mounts itself into that container. A router inside the application matches the current path against its own table of routes and renders the component that matches. Clicks on internal links are intercepted with preventDefault, the new path is pushed onto the history stack with pushState, and the view is re-rendered — this is client-side routing, and no document request reaches the network. Data arrives separately, as fetch calls to JSON APIs. The back button still works because the application listens for popstate and re-renders for whatever path it is handed.
Real-World Example
A team publishes a React dashboard demo as a static build: one HTML file, a 210 KB JavaScript bundle and a stylesheet, live at 'orbit-demo.99helpers.site'. Opening the root works. Sending a colleague a link to the same site with '/reports' on the end does not, until the host is set to serve the HTML file for paths that match no file. After that the same link loads the application, the router reads the path, and the reports screen appears. Nothing about the build changed — only the host's answer to addresses it does not recognise.
Common Mistakes
- ✕Publishing an SPA without the fallback rule — every deep link and every refresh outside the home page returns a not-found error
- ✕Shipping one enormous bundle for a site with four screens — visitors wait for code they will never reach before seeing anything at all
- ✕Relying on the framework's dev server behaviour as proof it works — that server rewrites unknown paths for you, so the bug only appears once the site is live
Related Terms
Client-Side Routing
Client-side routing is when JavaScript in the browser decides which view to show for a given address, instead of the host returning a different document for each one. Links change the screen without a page load.
SPA Fallback
An SPA fallback is a host rule that returns the site's index.html for any path matching no real file, so a single-page application can handle the address itself. It is what stops a deep link returning a not-found error.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Static Hosting
Static hosting is a service that stores a folder of finished web files and serves them over HTTP, without running any application code of yours. You upload the folder; the host answers requests for the files in it.
HTTP Status Code
An HTTP status code is the three-digit number a server returns at the head of every response, saying what happened to the request. It is the first thing on the first line — a 200 means here is the file, a 404 means there is nothing at that address.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →