Headless‌ ‌/ Static WordPress‌, For Marketers

What if I told you that you could take both the red and the blue pill?

Source: Giphy

Ladies and gentlemen, please welcome headless WordPress to the stage!

The adoption of headless technology is an upward trend. Among the enterprise organizations that aren’t currently using headless technology, more than 90% plan to evaluate headless solutions over the next 12 months (source).

With a market share of 65%, many of those considering the headless approach have WordPress websites but are unaware of what headless means for them, their website, and their business. If you are among them, read on, this post is for you.

Sign up for Bejamas newsletter!

Get the exclusive Jamstack web dev case studies (and more) in your mailbox!

Submit

What is headless WordPress?

Let’s first establish the difference between traditional and headless CMS architecture.

👉 A traditional CMS architecture, often called monolithic, means that the front end, what the users see, and the back end, where all the resources (content, images, templates, themes, etc.) are stored, are connected and dependent on each other.

To change something in the front end, you have to edit something in the back end. This is how you’re using your WordPress right now!

👉 A headless CMS architecture means that there is no direct connection between the back end and the front end. In fact, with this approach, you can have multiple front-ends (the heads) because they are completely detached from the back end. Instead, the content is delivered to the head(s) via API requests.

This allows you to manage your content in one way and use something entirely different to manage the presentation layer on many different channels (think beyond desktops and mobile, think smartwatches, and other IoT devices).

👉 With the above in mind, headless WordPress is WordPress without the front end, i.e., WordPress is used as an API endpoint. You can communicate with it, store data in it (like adding new posts or images), get data from it (like pulling the latest posts), or put data back into it (like submitting a contact form data), but it does not create the presentation layer, the front end.

To simplify it even further, this means that you can continue using the familiar WordPress dashboard for content management. However, you are free to choose a technology that works for you for the front end, whether Hugo, NextJS, Gatsby, or something else.

To push content to the front end, you’ll rely on one of the available APIs, the WordPress REST API or WPGraphQL.

The REST API comes with your WordPress install, making it the easiest way to take advantage of the headless benefits. However, REST API can get slow since it uses multiple queries to get data from your database, meaning that it will call for post data separately and then look for the images with another call.

On the other hand, WPGraphQL is a free plugin that provides an API for any WordPress website. It only sends a single query to get all the content piece information which, in theory at least, makes it much faster.

Why would you want to use a headless approach in the first place?

You might be thinking that headless architecture sounds way more complex than the traditional monolithic approach. And you’re right. It is more complex, but it comes with fantastic benefits.

But is the approach right for you? Well...maybe. Consider the benefits yourself.

Multi-channel content distribution

With headless, gone are the days of adapting and publishing content for multiple channels.

You publish your content once, and then the APIs deliver content to the channels you’ve defined. That means that one click is all it takes to publish a piece of content on your website, your mobile app, your social media channels, and even IoT devices.

Higher customization, faster redesigns

Because the front end is not connected to the back end, your web developers are free to make any changes to the presentation layer without taking care of the back end.

Ultimately, this means faster, simpler, and less costly front-end redesigns. But it also means maintaining two teams and two environments.

Lightning-fast speed, outstanding performance

By now, you’ve probably discussed the ways to increase the speed of your website with your team many, many times. Well, implementing headless CMS is one of the easiest ways to do this.

Headless means you’ll be removing the coupled front end, therefore ending up with a lightweight CMS. With APIs calling for content from this lightweight database, the delivery will be much faster and more responsive.

Higher security

In traditional website architecture, when your back end and front end are dependable on each other, hacking one means your whole website is in danger.

With headless, if a hacker happens to find a hole in your front end, the most they can do is take your website down for a few hours. Your CMS, database and anything in the back will remain safe. Also, the attack surface on headless is generally greatly reduced, meaning that hackers will have a much harder time finding any holes to breach, to begin with.

Future-proofing the technology

New technologies pop up every day, and other ones become obsolete just as fast. Because headless CMS relies on APIs, you won’t have to fear one of the technologies you’re using going obsolete.

At the same time, APIs will help you get up and running on new channels or frameworks that pop up in no time.

Headless WordPress benefits

So, headless CMS is great, but what about headless WordPress? And should you consider moving to it?

Familiarity

Most businesses are already familiar with WordPress CMS. It’s fairly simple to use, publishing is easy, and most content editors already know exactly what to do. With that being the case, the transition to headless WordPress should be much easier without putting pressure on new technologies on any team within your company.

Price

If you’re not a fan of monthly subscriptions that you would have to pay for most SaaS CMS options, WordPress might be what you need.

It’s completely free, and you can host it on your server or even desktop. You are free to be the sole boss of your website, and you won’t have to worry about falling behind on your payments or losing access to the website.

Improved performance

While WordPress is widely adopted, that in no way means that it is perfect. Quite the contrary, WordPress is oftentimes slow, especially for today’s standards.

By removing the front-end layer from the equation, you end up with a solid CMS and a chance to opt-out to a more performant solution.

WordPress isn’t going anywhere

As I’ve already said, WordPress has been here forever. It’s open-source CMS, and it has a thriving online community which means you won’t have to worry about it going anywhere anytime soon.

When not to go with headless WordPress?

While the headless architecture in itself is impressive, it isn’t for everyone.

No preview, no bells, and whistles

If you go for the genuinely headless route, chances are you won’t have access to the live preview option or the what-you-see-is-what-you-get text editor. Moreover, you’d most likely have to say goodbye to any previously installed plugins.

That means you will have to develop custom solutions for your website.

Having that in mind, if you don’t have a dedicated dev team to take care of your headless WordPress, it is not for you.

Technologically complex upgrades and maintenance

Installing new functionalities, upgrading the website, and maintenance becomes more complex with headless WordPress.

Since your back end and front end aren’t connected, you will have at least two different instances to maintain. Once again, to do this efficiently, you will need a dedicated development team.

Real-time data

Going headless is not without the trade-off regarding content and functionality you can present to your audience. If you need to use real-time data or user-generated content, explore your options before taking a dive.

Quick solutions

If increasing your website performance and security is a priority, but you don’t have time to build your headless solution from the ground up, the quickest way to test the waters would be to opt for static WordPress platforms/services. These services allow you to use WordPress as usual and easily deploy a static/headless version of the site for the world to see.

Luckily for you, there are already a couple of options that stand out in a booming ecosystem.

Shifter

Shifter is one of the leading players in the Jamstack WordPress market. Wait...what? You read it right. They market themselves as a Jamstack WordPress hosting platform. With Shifter, you’ll be able to migrate your existing WordPress website to their servers or make a new one, and from there generate static files from your website and deliver them via CDN.

Remember when I talked about static WordPress earlier? Well, that’s it. Except it excludes the need for a dev to work with SSGs.

Strattic

Strattic is another static and headless WordPress solution (like the above) that lets you migrate your existing WordPress website to its servers and deploy your fully static WordPress website.

For me, the most significant difference between the two is the list of compatible plugins, i.e., plugins that fully or partly work on these platforms. For the WordPress setups I have used previously, I’ve found Strattic to work better, + the migration and dashboard seemed much more intuitive.

Headless WP Starter

If you happen to be just a bit more tech-savvy, make sure to check out GitHub for solutions. One of the better ones is Headless WP Starter, an automated tool that lets you implement a headless WordPress backend that delivers content via the WP REST API and GraphQL to a sample React front-end.

Just keep in mind that you will need to find a hosting service for the frontend when it’s time to go live.

Headless Framework

The well-known WordPress platform WP Engine provides a headless WordPress Framework to build the front-end applications for headless WP, a pleasant experience.

These tools include a WordPress plugin, a set of npm packages, and guides to help build headless WordPress in Next.js.

Or use plugins

Seriously, you can put plugins like WP2Static or Simply Static to good use.

Let’s break it down; who is it for?

If you want to improve your performance, make a significant investment long-term, require a multi-channel presence, have at your disposal a development team, and at the same time want to keep that sense of familiarity that WordPress brings, then the headless WordPress approach is perfect for you.

On the other hand, if your budget right now is too limited to adopt new technology or hire new developers, or if your website is quite simplistic without the need to push content to mobile apps or other channels, then keep doing what you’re doing.

If something changes in the future, you now at least know what your options are.

By the way, if you are looking for someone to help you get a better-performing website while keeping WordPress as a CMS, look no further. After all, we did help top SEO company Backlinko (case study) radically improve the UX and speed of the website with Next.js + headless WordPress combo. We can do that for you as well.

👇Schedule a talk👇

BOOK A MEETING today and learn more about what we can do for you and your business.