In recent years, single page application (SPA) technology has become incredibly popular on the web. You might have heard terms like ‘headless’, ‘single page applications’, ‘React’, and ‘Vue’ thrown around, all of which are synonymous with this approach. SPAs and Headless Content Management Systems (CMS) are part of a wider approach to web development known as 'Composable Architecture,' which I cover in this article. But today, I want to focus solely on the relationship between SPAs and Headless CMSs since it's relevant to most websites.
This article aims to simplify the basics and demonstrate why your next website should be a headless one.
So, let's get started...
The problem with classic websites
To grasp why a headless setup is superior, let's first unravel how traditional websites function and the challenges they pose.
Classic websites are built from templates in which content from a CMS is injected and compiled into HTML on a server. Each time a new request is made, the resulting HTML page is sent to the browser. This is why you often witness a full page refresh whenever you navigate between pages. Additionally, even minor changes to a page component can trigger a full page reload.
These 'template engines' are integral to all classic CMS platforms like WordPress, Craft CMS, Drupal, or similar. In fact, classic CMSs aren't just content management systems at all — they're complex website-building machines. They require self-hosting on your servers and continuously regenerate entire HTML pages as users navigate your site. For a static marketing website, this can be burdensome for a company to manage and maintain. Here's why it's problematic:
Codependency: Your website and CMS are intertwined. Swapping one out for another means starting from scratch because the template language must align with your chosen CMS.
Bug Prone: Even minor glitches in either the front end or back end can disrupt the entire system.
Maintenance and Security Risks: Hosting your own back-end system means you're responsible for upgrading security patches, databases, and operating systems.
Ownership and Control: Your development team holds significant control and ownership over your code. Therefore, migrating often entails a rebuild simply because a new team may not fully comprehend it.
What does headless mean and why is it better?
Headless means de-coupling the front end from the back end. By using modern JavaScript frameworks and APIs to fetch content remotely, we allow the browser to compile our front-end templates without needing a server. Pretty neat, right? This kind of website is often known as a single-page application. Here's how it works...
Single page applications
Think of single-page application websites like mobile apps for your browser. They start by downloading all the necessary resources to run the entire site directly to your browser. Then, whenever there's new data gathered from an API request, they use JavaScript to smoothly adjust what you see. So, when you click on a new section, it looks like the page is changing, but really, it's just updating the parts affected by the data, like content, while keeping things like headers and footers untouched. That's why they're called 'single page applications'—the HTML page never fully reloads, just the elements that need to.
Now, mobile apps have been rocking our screens for years, but with JavaScript tools like React, Angular, and Vue.js, we can bring that same sleek experience right to your browser. It's a game-changer in web development.
These single-page apps give you more interactivity and smoother transitions, making for a fantastic browsing experience
Sure, these JavaScript technologies aren't exactly brand new—we've been keeping an eye on them for a while. But until recently, there was one missing piece needed for single-page apps to be adopted: a flexible headless content management system...
Headless Content Management
Traditional CMSs ended up doing way more than just managing content—they practically built entire websites. But headless CMSs? They stick to what they're good at: managing your content. They don't meddle with how your site looks or where it's hosted. How? Well, they expose your content via APIs, letting your content hang out in the cloud, accessible from anywhere.
The cool part? Your website can be built on any platform you fancy. And your content? It's not just for your website—it's future-proofed for whatever you need down the line.
Enter the new kids on the block: Cloud based, headless content management systems like Sanity, Contentful and Storyblok. They're making waves because they separate your content data from your website, giving your business the flexibility it needs to thrive for years to come.
Benefits, summarised
Usability
SPA websites are completely seamless. Developers can engineer silky smooth transitions as the content changes or sections are navigated which makes for a super slick user experience.
Modular
One awesome perk of headless development is the ability to use components. The framework can inject different components as needed, making it easy to grow and evolve a website without messing with other parts.
JavaScript based
SPAs use JavaScript, which is already a staple in front-end development. This makes maintenance easier and hiring developers a breeze since many are already skilled in JavaScript. Unlike server-side websites that often require multiple coding languages.
Decoupled
Separating the front-end app from the CMS means we're not tied down by the CMS's limitations. We can pull in what we need and use other services or APIs. Plus, we can tweak or swap out one or the other without overhauling the whole stack.
Cloud-based
Say goodbye to the days of managing monolithic PHP/MySQL servers. Thanks to cloud-based content management systems, all you require is a static front-end framework. It's simple, cost-effective, and truly a breath of fresh air for your business operations.
Freedom
Before headless CMSs, we mainly thought of website content as something directly tied to webpages. But now, we're reimagining how we structure content, making it more reusable as accessible data. This data isn't just for SPAs—it can be used in various solutions like stock management tools, online ads, newsletters, outdoor digital signage and more.
Conclusion
It’s no exaggeration to say I’m seriously excited at the possibilities all this enables.
Single-page applications have injected some excitement back into web development. With SPAs, we can offer clients more while ensuring users get dynamic, interactive, and seamless browsing experiences. It's a win-win.
