CrafterCMS: A Headless CMS for SPAs

Single-page applications (SPAs) have been quietly taking center stage in the world of web development for some time. While the average user might not be aware, many of the most commonly used popular websites and social media platforms are SPAs. The likes of Facebook, Twitter and the Google Suite of Gmail, Maps and Drive are all built using this underlying technology.

For enterprises considering adopting SPAs rather than traditional web applications, there are several advantages they can benefit from and use cases that they can leverage. In this article, we’ll explain what SPAs are, how they work and the benefits you can expect when using them with a headless CMS like Crafter.

What Is A SPA?

A single page application is a web application that only reloads data, not HTML, once it has loaded in the browser. By dynamically rewriting the content on the page in the browser, a SPA only needs to reload the most relevant content for the user.

For example, when using a web application like Gmail to check your inbox, only the content in the center of the page changes as you toggle through and open each email. The navigation, on the other hand, remains the same.

How Do SPAs Work?

As we mentioned, SPAs dynamically rewrite the content on the current browser page. This approach differs from a multi-page application which is the traditional approach to designing web applications and how the majority of sites are still created today.

In a traditional web application, the application logic is performed on the server-side. Meaning that when data is exchanged back and forth between the browser and the server, a new page is loaded each time. When a user visits a web page, a request is sent by the browser to the server and an HTML file is returned each time.

On the other hand, SPAs execute application logic in the browser, leaving just the business logic to the backend. SPAs utilize AJAX and HTML5 to build responsive apps. React, Vue, Angular or other Javascript frameworks perform the browser-based processing for the single page application.

Much of the content on most websites, including headers, navigation bars and footers, remains the same on all of the site’s pages. When a user visits a web page, an HTML file is returned on the first request. For all other requests, a JSON file is sent back to the browser. Partial page updates rather than full-page refreshes are used to update data, content, and UI. The result is faster loading speeds and an improvement in the overall user experience.

Benefits of SPAs vs Traditional Web Applications

SPAs provide several advantages for both developers and end-users. Here are some of the benefits:

• Improved user experience: SPAs make the user experience more fluid with rich UI interactions that leverage asynchronous calls to the server for data and partial page refreshes. By not having to refresh the page each time, visitors are treated to a better user experience that allows them to get the information they want much faster.
• Clean architecture: SPAs architecture promotes a clean separation of the frontend application from the backend services and data. This approach makes development faster and more flexible.
• Faster loading & more responsiveness: Compared to traditional web applications that need to load the entire web application each time, SPAs are much quicker and more responsive, allowing for a smoother browsing experience. Scrolling is continuous and uninterrupted. The natural scrolling behavior of SPAs makes them perfectly suited for mobile users. Web pages that are functionality-rich such as social media platforms like Facebook, are testament to the increased responsiveness of SPAs.
• Less resource consumption: SPAs send JSON files rather than the entire HTML page each time, which decreases the amount of bandwidth and server resources consumed.
• Foundation for PWAs: SPAs make it easier for developers to transition web applications to mobile devices. Traditional web applications require that developers create a completely separate mobile app or website for mobile devices. On the other hand, a SPA makes the transition to a progressive web application (PWA) that provides a mobile-app-like experience in the mobile browser much easier.

SPA Use Cases

Modern Enterprise Websites

SPAs provide a modern experience for enterprise websites. With faster page load times and increased responsiveness, Users can quickly navigate to find the most relevant information and interact on these platforms using the devices and channels of their choice.

Customer Portals & Communities

SPAs provide a terrific option for private communities and customer portals. Users can benefit from targeted content and a personalized experience.

Financial Agent / Advisor Portals

Organizations, especially those in the financial service industry, can use SPAs to create portals for their agents and advisors to provide private customer experiences to their consumers. While one of the drawbacks of an SPA is that it can be challenging to optimize for search engines, private agent / advisor portals for use by their customers only need to be accessed by specific users, and the improved user experience can be highly engaging and user friendly.

SaaS Products

Users of SaaS products expect a highly interactive, high performance experience. A SPA provides a great way to deliver an awesome customer experience and also allows enterprises to easily support mobile channels as well.

Building a SPA with CrafterCMS

SPAs can provide several advantages to enterprises and can deliver a dynamic user experience for site visitors. However, organizations need to be able to leverage the power of an SPA and create content easily without running into trouble. To do that requires an API-first CMS that provides frontend framework flexibility, allowing SPA developers to utilize best-in-class Javascript frameworks such as React, Vue, or Angular.

CrafterCMS is a headless "plus" content platform that goes beyond the limitations of a simple, headless-only CMS. With extensive content authoring capabilities that work with SPAs, CrafterCMS provides marketers with the tools they need to create engaging content and experiences with SPAs. Moreover, CrafterCMS facilitates unique DevContentOps processes that enable highly productive collaboration between the content authors and SPA developers.

For example, when Penn Mutual needed a modern CMS that could replace their existing legacy infrastructure, they looked for a new CMS that could improve both their customer experience and that of their financial services agents, while at the same time providing their developers with modern Javascript framework options for building SPAs. So, they turned to CrafterCMS.

Using Crafter’s extensible APIs, Penn Mutual developers created additional REST APIs to meet the headless content API requirements of their existing React-based SPA. This made the transition to CrafterCMS easier and allowed their team to leverage CrafterCMS’ powerful content authoring tools, including in-context preview and WYSIWYG editing for content authors.

Read more about Penn Mutual in this case study, and if you’re a developer, check out this tutorial to learn how to create a React-based SPA using CrafterCMS.