Decoupling the CMS: A Closer Look to Headless WordPress

What is a headless CMS?

Headless CMS follows a decoupled architechture where the Content Managment System is accessed through an API or an SDK. Usually, we find CMSs that have both the presentation and data layer together. For example, WordPress.

What is WordPress?

I really don’t think WordPress needs an introduction of its own, but somehow, if you don’t know what WordPress is, it’s one of the most popular Content Management Systems out there. WordPress is an open-source project that has evolved over the past years and is supported and maintained by AutoMattic.

Drawbacks of a Traditional WordPress Environment

A traditional WordPress installation uses themes, which are a collection of template files to display content. It controls the content displayed on the website through various files - e.g. single.php to display single posts, home.php for the home page, etc.

Traditional WordPress renders content to the visitor via Server Side Rendering. The SSR approach to rendering the site can hurt the performance compared to other methods of page generation, such as static site generation. Each time a visitor goes to a new page, the browser reaches out to the server and the server stitches to the web page together and sends it over to the user.

Benefits of Headless WordPress

Faster Performance

WordPress websites that are powered by static site generators like Astro / Nuxt or NextJS have a much better load time and are incredibly smooth and responsive.

Greater flexibility

Frontends built with modern JavaScript frameworks provide a much more flexibility to the developers in building out the UI, while the content writers can keep working on WordPress dashboard without compromising productivity.