What is a single page application (and how can an SPA CMS help you build one)?

Today’s businesses are increasingly being judged by the quality of the digital experience they can provide their customers. With so many interactions happening online, a brand’s website is often the first port of call for a potential customer considering their products or services. That’s why it’s crucial to delight these customers with a website that loads quickly and provides a dynamic user experience.

Brands that want to excite their customers in this way may find that a single page application (SPA) provides precisely what they’re looking for. If you’ve ever used a Google product such as Gmail or Google Maps, or if you’ve visited Netflix or Airbnb in your browser, then chances are you’ve interacted with an SPA already, even if you don’t know how it works and the best way to build one. In this article, we’ll answer those questions and show you how an SPA CMS that uses headless architecture can help.

What is a single page application (SPA)?

A single page application is a web app that appears as a single page in the browser. Instead of loading a new page from the server each time, only data is reloaded, allowing an SPA to dynamically rewrite the content on the page. As a result, most of the content on the page, such as sidebars and navigation headers, remain the same. The browser renders only the most relevant content for the user every time they click something on the page, rather than reloading everything each time.

How do SPAs work?

In traditional web applications, pages need to be reloaded every time a user makes a request. With SPAs, every time a user sends a request from the browser to the server, the SPA returns an HTML file along with some JavaScript and CSS code. The only things contained in that HTML file are the placeholder components like sidebars and navigation. When the browser executes the JavaScript files, content and data are then pulled from the server. This is what allows the content to be dynamically updated without having to reload each time.

An easy-to-understand example of an SPA is Gmail. When you open Gmail on your browser, the header and sidebars never change. Maybe only the number of emails filling your inbox decreases as you clear through them. The most relevant data, the emails in your inbox and the content within them, is the only thing that changes each time.

SPA frameworks, which provide the foundation for building SPAs, include many of the most common JavaScript frameworks developers use today, such as Angular, React, Vue, Backbone, and Ember.

Benefits of SPAs

There are a number of benefits that come from adopting SPAs. Here are a few of them:

Loading times and responsiveness

The most readily available benefit of SPAs is the improvements in speed and responsiveness. When a new page doesn’t have to be loaded in the browser every time, websites can provide the content a user is looking for much more quickly.

Better user experience

The knock-on effect of faster loading times is a better user experience. With so many options available to them, customers don’t want to be restricted to sites that load at a snail’s pace. This user experience is particularly evident on social media applications that allow for continuous scrolling without waiting an eternity for content elements to load.

Easy transition to PWAs

Another benefit of SPAs is that they make it easier for developers to turn them into progressive web applications (PWAs) later on. PWAs are especially useful for mobile device browsing as they make the user experience similar to a native mobile application. As a result, companies can create a mobile app experience on their website without having to build a specialized iOS or Android app.

Offline caching

SPAs allow data to be cached so that it can be accessed later. So, if there is content you already viewed in a browser, but there is no internet connection, you can still access it.

Fewer resources used

SPAs don’t need to load an entire webpage every time there is a server request. As a result, this reduces the demand on servers and the bandwidth required.

When to use single page applications?

Single page applications are great for several use cases, but there are a few instances where building the web app using an SPA makes the most sense and isn’t just a question of preference or convenience:

Customer portals and intranets: Customer portals and intranets tend to be closed digital communities that only a few people need to access at a time. This makes them ideal for SPAs as they don’t need to be SEO optimized, and most of the information, such as navigation bars and sidebars, needs to load quickly so that users can get the content they need and leave.

SaaS products: SaaS products are another great use case for SPAs as they need to be fast loading and responsive.

Social networks: Social networks are optimized for continuous scrolling so opting for an SPA helps to improve the user experience on these platforms.

Building SPAs with an SPA CMS like Storyblok

If you’re going to start building single page applications, then adopting a headless CMS can make things easier for both developers and marketers. Storyblok’s headless architecture makes it an ideal solution as an SPA CMS since it is frontend agnostic and content creator-friendly.

Developers don’t need to be restricted to a specific set of tools and can use any SPA framework they want, whether React, Vue or a newer framework such as Svelte. For content creators, being able to edit and publish content to SPAs is essential, and Storyblok’s user-friendly features, which include a Visual editor and reusable components, allow even the least technical of marketers to get the job done without having to ask for assistance.

Storyblok ticks all the boxes for building SPAs. If you’d like to find out more about launching one, see our tutorial: Deploy Next SPA with Storyblok to Layer0.