Over the past few years, single page application (SPA) technology has taken the web by storm. Terms like ‘headless content management systems’, ‘web applications’, ‘React’ and ‘Vue’ are gaining traction and more and more business owners are cottoning onto the power and efficiency of the SPA.
But if all of the above just reads like a foreign language, we’re here to help. This article is designed to share the fundamentals, cut through the confusing jargon and ultimately, help you decide whether your next website should be a single page application or not.
Let’s dive in…
To understand what a single page application is, we first have to understand how a classic website works, also often referred to as dynamic websites.
Until recently, classic websites usually required template engines which compiled entire webpages on the server, html and content combined, and sent them to the browser to render whenever a new page or request was made. This is why you’ll often see the full page flash as it re-renders on every page change. You’ll also often see a full page re-render even if only a small component on the page changes. This results in a browsing session that feels more akin to the clunky experience of flicking through a PDF than what you’d hope and expect from an interactive website.
Hard page changes: Sky News is a classic server side website
Much like mobile native apps, single page applications work by downloading the initial resources needed to run the entire app to the browser. Then, as new data is queried, the app will adapt just the components affected by that data. This means that even if you click on a new section of the app, it’ll give the illusion of a page change, but only re-render the contents of the section rather than the header, footer and any other global elements that remain unaffected. And this is why they’re called ‘single page applications’, because the html page never actually changes — just the elements that need to.
These single page applications allow more interactivity and app-like transitions, which results in fantastic, seamless browsing experiences.
Seamlessly fluid page transitions: Our Positive Group website is a single page application
Existing content management systems such as Craft Cms, Shopify and Wordpress (although we’ll caveat here that we’ve never been fans of WordPress) have introduced headless APIs as a core part of their system.
As we’ve mentioned before, a primary benefit is usability — SPA websites are completely seamless. Developers can engineer silky smooth transitions as the content changes or sections are navigated which makes for a seriously enhanced user experience.
Another fantastic benefit is that developing in a single page application allows us to build using components. The framework dynamically injects different components based on what is needed which means growing and evolving a website is much more efficient as we can drop or change a component without affecting others.
Decoupling the front end app from the content management system means we’re not limited to the capabilities of that particular content management system. We can pull in what we need, but still use other services or software APIs. It also means it’s possible to refactor one or the other without changing the whole stack.
Before headless content management systems, we rarely considered website content as data — it was always associated directly with how it would be rendered in the context of a webpage. But now we’re re-thinking how we structure our content and considering more ways to make it reusable as accessible data that can not only populate a single page application, but many other solutions too. For example, an online shop may list all of their products, descriptions and pricing on their website — but if they create this information in a headless content management system, they can tap into that data from more places (such as stock management tools, online ads, customer relationship management tools etc.).
It’s no exaggeration to say I’m seriously excited about the state of the web at the moment.
Single page applications have made things fun again. Thanks to the SPA we can offer our clients more, while ensuring end users get the dynamic, interactive and seamless browsing experiences they deserve.