WordPress As Headless CMS For Single Page-Applications

March 21, 2018

WordPress is the CMS of choice for most front-end developers because of its easy-to-understand codex for customizing, the easy-to-use user interface and the wide array of community-supported plugins. It’s perfectly suited for most informational websites you see on the web, but occasionally there’s a need for a higher degree of user interaction (a web application) or an elevated experience (animation and visualization), and in either case there are huge performance benefits. These scenarios call for a single-page web application, which are often built with JavaScript libraries such as React or Angular.

The current state of web development tools and languages (collectively known as a “stack” these days) makes building, compiling and deploying such applications much easier, but only if the content is static or provided in an interchange format and then bundled into the final product. When the project you are working on requires dynamic custom content as well as unique functionality, we now have a few options.

First, though, let’s talk about what a content management system is. Common CMS platforms have 3 essential components:

  • A database to store content.
  • A private interface to manage the content in a human-readable way.
  • A public interface for users to interact with the content.

WordPress does all three of these wonderfully, but any time you click a link or submit a form, it results in an HTTP request. This may only take a matter of seconds, but the page will reload and render, assets are rendered once again (whether they are cached or not) and any user input that wasn’t sent through the request is lost. It’s a bit clunky and despite being standard, it can be a jarring experience if the rest of the interface is crafted very smoothly. The technical reason for this is that the front-end interface is rendered server-side each request, before being rendered client-side. The page goes blank, the browser is redirected, and a new page is created based on the request.

A single-page application does all of the rendering client-side, and that is where significant performance improvements and design enhancements can be made. Transitions are smoother, there is no blank browser window and content can be preloaded or gradually loaded. This is in addition to the endless possibilities of a custom-built application — which I won’t dive into here — but thanks to the REST API built into WordPress and some custom configuration, we can replace the default front-end interface that visitors will see.

So, what does this mean? The most obvious benefit is that this allows us the lean on the features of WordPress for content creation and combine that with modern and performant front-end options. It’s very efficient to build custom data structures within WordPress that anyone can manage, but gives us more room to experiment creatively with the user interface. Whether it’s for a highly visual campaign experience that will be live for a few weeks, or a custom application with requirements that a plugin can’t gracefully fulfill, we don’t have to sacrifice usability for less technically savvy colleagues in order to create beautiful digital experiences. Best of all, they can still be created rapidly and supported easily — which makes them resource-efficient for digital teams.