What is a Single Page Application (SPA)?

We see SPAs on social media and photo sites, like Instagram and Pinterest, as we scroll through a (seemingly infinite) flow of messages and images. We also see it in the online versions of Gmail and WhatsApp, where messages appear automatically.

The process is as follows: Pinterest's home page contains images. The new images appear thanks to SPA technologies that retrieve images from the website's servers and display them on the site.

How Single Page Applications (SPAs) work: the big picture

A single-page application (SPA) is a mix of server-side and client-side methods that creates, sends, and retrieves new content for the client-side browser. The browser then displays the new content using JavaScript, HTML, and CSS.

A single HTML template with placeholders

A SPA is a single HTML page or template containing no content, only a skeleton of divs, headers, and other HTML elements. This single-page template uses these HTML elements as placeholders for the content. Every element has a unique name, so the SPA's JavaScript can assign content to the named placeholder.

Server- or client-side processes and storage

The JavaScript connects to the server and starts client/server communication. Some common communication mechanisms include WebSockets, APIs, and GraphQL. There are no limits to the kind of architecture it can use, such as headless or model-view-controller.

Once a client/server connects, the client can retrieve data and content. It can either store it in the browser for later use or send it to the user interface.

Events

Any event can trigger a partial refresh. The event could come from the server, like a new Gmail message or a confirmation from a remote process. Or, it could come from the user's actions in the browser, like scrolling or clicking a button.

Partial page updates and refreshes

From the user's point of view, there are two distinct kinds of refreshes: data or design. If the data changes, the user sees the content change, but the display design remains the same. In that case, the HTML placeholders receive text, numbers, and images. However, the display can also change if the retrieved content contains markup, thus creating new designs on the fly.

In short, the SPA JavaScript receives or fetches data or content. The content can be local or remote. It substitutes the value into HTML placeholders, altering screen sections in real-time.

Client-side technologies

Many SPAs use JavaScript frameworks like React, Angular, and Node.js. These let developers create interactive, responsive UIs. Asynchronous client/server communications rely on Ajax and the Fetch API. Redux for React and other such state management tools manage the logical flow of a user's state, like next and previous logic.

Single-page applications versus Progressive web applications

While a SPA is real-time fast and can contain interactivity and updates like any mobile, web, or desktop application, a SPA is not a native app or progressive web application (PWA). Its purpose is to add immediate and asynchronous response times to a single web page. To do more with a SPA is to stretch its limits, where more robust technologies like PWAs and native apps have excelled.

What exactly is a progressive web application (PWA)?

Progressive web applications (PWA) create native-like application experiences in the browser. You can use them on mobile or web apps, online or offline. PWAs need no installation; instead, the browser runs the PWA directly. It uses typical front and background coding platforms to provide full application functionality. Learn more about PWAs in our glossary term page, here.

What is a single-page application (SPA)?

SPAs don't attempt to create an "application" such as Spotify or Amazon. The closest you'll see an SPA look like an application is when Airbnb or Google Maps change the list of items as you resize their maps. But, to add features like search, filtering, and popups, these sites need a full application capacity, which a PWA and not a SPA can deliver.

But that’s also its strength. SPAs offer a simple solution to a common problem: the need for users to experience real-time updates while navigating your content and web pages.

You can implement your SPAs yourself or use an agency specialized in SPA. In both cases, SPAs come out of the box with features such as infinite scroll, lazy loading, partial refreshes, and background data-loading. And because their simplified code bases are easily updated, the time to market on all channels is immeasurably faster than native apps.