What is single page application (SPA)
A single page application, or SPA, is a web application that updates and re-renders specific parts of the page instead of using a web browser to load an entirely new page.
Table of Contents
How does single page application work?
First, let's look at the traditional website that is not SPA. Imagine how you navigate through your favorite news website. What usually happens is that right after you click on a specific category, the whole page reloads and re-renders. This is called multi-page application, or MPA in short.
On the other hand, single page application retrieves necessary resources (HTML, CSS, and JavaScript code) during the initial load. Sometimes it can even be the whole app if the bundled code is small enough.
After the initial load is done, you stay on the "same" page even if you click around and navigate through the app. Does the name single-page application start to make sense now?
But the URL has changed. Behind the scene, though, the browser is no longer responsible for routing. You're on a single page if you don't see the traditional browser reload as you navigate the app. I recommend this article by George Norberg to get why the browser does not handle routing for a single page application.
What's the benefit of a single-page application?
When the user clicks and takes actions, SPA re-renders certain parts, does async requests, etc. Navigation does not reload the whole page, and that's great in terms of engagement and performance. The app may almost feel like a native desktop or mobile app. The server does not have to send that much data and does the heavy lifting (depending on the architecture).
Since the single-page application gives a user feeling of a native app, you can build it once and ship it across all kinds of devices and operating systems. A user does not have to download and install an app on his device.