What is a headless CMS?

A headless CMS is not too different to how we normally use Content Management Systems.

The user has a logged-in dashboard that they can add/edit/delete content and those changes are represented on the front end of their website.

“A headless CMS has only one focus: storing and delivering structured content.”¹

We now only use the headless CMS as the back-end and the data that is stored in the headless CMS gets decoupled to a readable file (RESTful API). What this means is that the user interface on the CMS and the data that we take from that are now completely separate from one another. We can use the stored data in the CMS in a format that is easily readable, scalable, and we can do many things with it. We are not just tied down to the CMS and its capabilities with using the data.

What are the advantages of using a headless CMS?

We are now able to build front-end applications in a way that isn’t restricted to the system the data is attached to. So simply, WordPress is built in PHP but we could use JavaScript to build the front-end website or a mobile app for example.

Can we use WordPress as our headless CMS?

Yes, we can! WordPress comes pre-packaged with its own REST API and not only that but due to the increase in popularity in Headless CMS,’ there are now more people developing better ways to pass data out of WordPress. We can still keep the WordPress admin system that has become familiar and trusted with so many people but we can now use this data in a way we have never done before by creating ultra-modern web applications.

Using Javascript Frameworks

There are a handful of growing JavaScript frameworks that we can now use with the REST API that specialise in building front-end web applications. Some of these include Hugo, Jekyll, Next.js, Nuxt.js, React, and Gatsby. Gatsby is my favorite but they all come with their own advantages and developers will have their own preferences too.

The advantages of using Javascript Frameworks

Traditionally if we wanted to change the way a WordPress site looks we would either install an off-the-shelf theme or build our own custom one (I’m a fan of the custom route) but we don’t have to do it like that anymore. If we were to build a theme in the traditional way the rendering of the content and the design is done at the same time, so effectively each time the visitor views a page on your site they are building it from the server to the browser which is why we get a delay in loading times.

What Gatsby does is generates all the pages from the content in WordPress when an administrator/editor updates by saving them into static files/pages. The result is that the administrator/editor is triggering the build but the user only sees the rendered pages. This makes Gatsby load FAST websites by default but not only that the transitions between pages are seamless.

Websites Built on headless CMS using Gatsby

Some examples of websites built in a JavaScript framework using Headless CMS for content. You’ll notice the seamless switches between pages.

FENDER https://www.fender.com/
Hi-Rez Studios https://www.hirezstudios.com/
Western Red Cedar https://www.realcedar.com/

References

1. https://www.storyblok.com