Ups and Downs of Headless WordPress

There are many pros and cons to using headless WordPress. On the one hand, it can be a more efficient way to manage content. On the other hand, it can be more complicated to set up and use. 

This article will cover some of the key pros and cons to consider before deciding on whether or not to use headless WordPress.

However, before we get into that, we have to break down the basics of headless WordPress.

What Is Headless WordPress?

Headless WordPress is a way to build an application using a REST API in order to pull content from a WordPress website. 

In other words, headless WordPress is essentially flattening your website into an app allowing you to separate the frontend of your site from the backend. Additionally, WordPress Headless WooCommerce can make it easier to manage complex data structures and integrations.

What Does Headless WordPress Look Like in Practice?

In practice, there are many different ways that people implement headless WordPress. However, most implementations will look something like this: 

First, you’ll set up a sort of proxy script that can communicate with your server and request information about posts.

Then that script will communicate with a second file on another server (usually running NodeJS), which will receive the requests for content and return JSON objects back, including the post’s data.

Really, the possibilities are endless. You could create a desktop app that uses headless WordPress to build your site’s content, or you might even create an Alexa skill with headless WordPress at its core, allowing you to control aspects of your site with voice commands. 

Because there are so many different ways to implement headless WordPress, it can become difficult to figure out which way will work best for your specific site.

What Is Headless WordPress React?

In a lot of ways, headless WordPress React is very similar to the typical headless implementation outlined above. 

However, instead of using NodeJS as your backend, you’re essentially building a client-side app that uses both React and WordPress for its content source. In most cases, this will be a SPA (single-page application).

Here’s what that might look like:

In this scenario, there are two scripts running on the server: one handles sending information about posts to the frontend, and one handles sending requests back from the frontend to make changes on the backend (in our case, we’ll only need a script for making updates because we can’t create new things through headless WP).

The biggest challenges with this approach are:

Figuring out how to get WordPress and React to play well together. There are a number of different options available, but the most common choice is WP REST API. 

Setting up unit tests for your code can become difficult because you’ll have various components that work with both client-side and server-side APIs. In some cases, it might be easier to set up integration tests instead of unit tests.

In addition to these challenges, there are several key benefits of using headless WordPress React over other approaches.

It’s more scalable than a typical headless implementation because it uses a single programming language (JavaScript). It allows you to use the same templates for your frontend and backend. Since they have the same templates, it also makes it easier to reuse code between the two.

It’s also worth noting that there are some things you can’t do with headless WP React that you might be able to accomplish using other headless implementations, such as creating new posts or pages. However, for many use cases, this won’t be a problem.

What Is Headless WordPress Hosting?

As its name implies, headless WordPress hosting is a way to host your site’s content so that it can be accessed without the need for the frontend. Much like with headless WP React, there are several ways to set up headless WordPress hosting.

However, most of them will boil down to something similar to this: First you’ll install WordPress on your server (or VPS). Then you’ll copy all of the data from your live site into the new installation (or database dump it if necessary).

From there, you’ll build out your API and connect it to an app on another server. You might even use WPGraphQL as your API backend (although there are many others available). 

Just like with regular HTTP requests, this will allow you to make calls with your app or script. Of course, you can always check this company out for some help if the process turns out to be too much for you.

Although it’s arguably the least common approach, there are a number of things you can do with headless WordPress hosting that isn’t available in other scenarios.

You can control permissions using custom post types. If you wanted to, for example, only let users who are logged into your website edit certain posts, then headless WP would be one way to set that up. 

Headless WordPress hosting is probably the best option for integrating existing CMS plugins with your site because they’re often built with APIs in mind.

You can also “wrap” an existing plugin so that it functions as a piece of your headless backend. A good example here might be WooCommerce (which has its own REST API). 

With some work, it would be possible to use WooCommerce as the only plugin on your headless site.

Not all of these features are offered in every headless WordPress hosting package. 

However, if you’re looking for more flexibility than you would have with a typical headless implementation, then this might be the right choice for you.

What Is Headless WordPress Framework?

As its name implies, the headless WordPress framework is a set of tools that you can use to create the foundation of your app. It typically includes things like routing and data fetching capabilities.

However, all the top web development companies will tell you that each implementation will be different in some way (or several). It’s difficult to list all of their key features here in one article. However, we’ll do our best to highlight the most common ones:

• Advanced templating – If you decide to build your own Headless WP React with WP REST API, then you’re going for bare-bones (and therefore simple). However, if you go with an established framework like Headless WP Bootstrap (which uses VueJS) or GraphQL Tools for WordPress (which uses React), then you’ll have access to advanced templating features like the ones you’re already used to in frameworks like Vue and Bootstrap.
• GraphQL – If you’re familiar with GraphQL, it might be worth using something like Headless WP GraphQL to take advantage of its well-documented API. That said, if you’d prefer to roll your own implementation or use something else entirely (like REST), then this isn’t a requirement by any means.
• Server-side rendering – Server-side rendering is when JavaScript runs on your server instead of the browser. It’s considered faster than client-side rendering because users won’t have to wait for their request to go back and forth between servers before they can see the site. Depending on the framework you use, you might have to implement this yourself.
• Offline capabilities – One of the benefits of headless WP is that it doesn’t require a browser window to access your content. In fact, because Headless WordPress works as an API, you can technically access it from any device with a network connection. That said, if you want to go a step further and make sure that your app will still function offline, then using something like React Native might be helpful for future-proofing your app.

Is WordPress a Headless CMS?

WordPress is a Content Management System, not a headless CMS. 

However, if you’re looking for a way to build out a site that can be managed in different ways (through templates or plugins), then it might be the right choice for you. If so, take a look at WP REST API and see if it’s something you might want to use.

Headless CMS vs. WordPress What’s Better?

As far as a “what’s better” answer, there really isn’t one. It all depends on what you’re trying to accomplish and how you’re going about it. 

For some use cases, headless WordPress could be the right choice because it allows for more control. In other cases, a standard headless CMS might work better because of its scalability or because it’s built specifically for headless implementations.

There are many ways to build out a WordPress site, some of which are better suited for certain use cases than others. 

However, if you’re looking to go the headless route, then there are also several ways to do that with WP as well. The approach that is best for you will likely depend on what you’re trying to accomplish.

So What Are The Ups and Downs of Headless WordPress?

With any change to a website, there are benefits and downsides that you should keep in mind before making the switch. 

Let’s go over some of the biggest pros and cons to headless WordPress based on my experiences and those of other WordPress professionals.

The Pros of Headless WordPress

In general, I have found that using headless WordPress can improve the performance of your site. There are a number of reasons for this. 

For example, there is no longer a direct point of contact between your frontend files and your server which means that you won’t have to worry about a single point of failure.

Since headless WordPress uses API calls instead of loading your site in a browser window, you can technically access the backend from any device with a network connection – which also makes it easier to automate various aspects of your workflow. 

In some cases, this alone can make implementing new technologies fast and painless. You no longer have to deal with requesting information from the server through GET requests, so things happen almost instantaneously.

In some cases, using headless WordPress can be beneficial because it works on every major browser unless there’s a plugin for that on the frontend. However, if you’re building a React or Vue app, then compatibility becomes less of an issue.

The Cons of Headless WordPress

Unfortunately, while using headless WordPress does have its benefits, there are also some downsides to consider. 

For example, you no longer have access to your server logs. This means that it’s more difficult to debug issues with your site because you’re no longer able to see what users are actually doing on your backend.

You also lose access to third-party plugins unless they’ve been specifically written for headless CMS or WP. 

Similarly, you can’t just upload a file and insert it into your page like you can in WP-Admin or even at the command line. Depending on the framework you use (or how well the CMS is built), this may not be an issue but it’s something worth keeping in mind.

Conclusion

As you can see, there are both benefits and drawbacks to using headless WordPress. If you’re planning on building a single-page app with React or Vue, then it’s definitely worth considering. 

However, if you’re looking for something more developer-friendly, then your best bet might actually be a standard headless CMS.

Author’s bio: Danny Wilson is a digital marketing specialist and a content writer at Digital Strategy One.
Focused around SEO, he is also dedicated to creating high-quality content for social media and marketing in general.

Headless WordPress Overview | Real World Headless WordPress Example