What to choose: traditional or headless CMS? What is the difference? And what can WordPress offer in this field?
In this post, we will go through all these questions.
Table of Contents
- Traditional vs. Headless CMS Architecture
- Headless WordPress Advantages
- Headless WordPress Drawbacks
- Tools to Turn WordPress Headless
- Headless WordPress and Crocoblock Plugins
- FAQ
- The Bottom Line
Traditional vs. Headless CMS Architecture
Traditional CMS (also called monolithic) – and WordPress is one of them – is a single application that handles both the back-end part responsible for the content creation, storage, delivery, etc. and the front end, which the user will interact with. They are tightly coupled, and it’s very difficult to use and connect either of these parts separately to other applications. The data from the back end is organized on the front end with the help of templates that are also a part of one extensive monolithic application.
In contrast, a headless CMS structure implies decoupling those two parts, so the CMS is only responsible for storing and delivering content with REST, GraphQL, or other APIs. While the front end can be built with any technology stack and just receives content using those APIs. That’s why both the front end and back end can be customized separately without affecting each other.
Simply put, the headless architecture gives you much better flexibility (and speed, if things are done properly) but requires much more time and effort for development as well as really professional programmers.
This architecture is called “headless” because the front end is a “head” of the application – because it interacts and presents something to the user, while the back end is the “body,” because it does all the “dirty” job.
Headless WordPress
WordPress is a monolithic CMS by its nature (while other CMSs are born headless). That’s why the idea of recent years to turn it headless is not about changing the whole concept of the CMS to its core but finding a way to make it work as headless to get all perks such configuration brings.
That’s why when we are talking about headless WordPress and tools to convert it to this state, often, it’s not about complex custom development but about converting the results of the traditional WordPress site-building process into a bunch of static files. And this task is something that even non-developers can do. With this approach, you will not distribute the content to the smart screen of your fridge or other exotic devices but will enjoy speed and performance.
Headless WordPress Advantages
There are three main advantages of headless WordPress:
Speed and performance
Your presentation front-end layer is already pre-rendered and static, so there are no requests for database and real-time rendering.
Security
Simply put, with the headless approach, you get two sites instead of one: one runs the back end and stores content, and the other presents it to the user. The first part is vulnerable to different kinds of attacks, and as a rule, all the hackers and viruses access the back end via the front end. But now, they are two separate entities, so it becomes a much more complicated task.
Scalability and compatibility with many devices
When the website becomes a distributed system and can work on many devices (or get embedded in applications or CRMs), custom professional front-end development is required in this case, so you will definitely need a team of full-stack programmers.
Headless WordPress Drawbacks
It doesn’t support dynamic data requests/render
The biggest reason for most of the drawbacks that headless WordPress has is that it’s static, so tools like WooCommerce will not work on it, as well as many plugins that offer dynamic interaction functionality. However, you can integrate things like Shopify, BigCommerce, or Ecwid to deal with shopping carts and payments for you.
But if you want to enjoy dynamic content, filtering, and other perks available in WordPress for very affordable prices, not spend a year or two on custom development, and even without hiring full-stack programmers, headless WordPress is not a good idea at all.
The static nature of such sites is also the reason why you can’t see the changes you made on the back end instantly appearing on the front end – because it takes some time to push things and convert them into static pages.
Complex WordPress headless sites require a lot of work
When we are talking about more or less complex headless websites that are built on top of WordPress, it requires a lot of attention and development for the custom front end, experimenting, and testing. So, there will be a lot of iterations because many plugins will not support such architecture, APIs should be set up correctly, and the user experience should be consistent across all platforms.
You will need two teams of professional developers – one for the back end to deal with WordPress and another for the front end, to work on the custom development using JavaScript/TypeScript frameworks such as React or Vue.
It will be costly
This drawback stems from the previous fact. Many developers and long execution times cost a lot of money.
Tools to Turn WordPress Headless
Even if you don’t plan to build complex distributed systems and render your website on smartwatches and other specific devices, you might simply need a static website to improve speed, performance, and security.
NOTE
Converting your site static is a great idea if it is not based on dynamic elements, and is something like a landing page, company presentation, portfolio, etc. Of course, you can use some highly dynamic elements there, but they must be third-party integrations supported by their servers.
There are definitely more tools, but in this article, I will highlight just three of them.
Simply Static Plugin
This plugin has an extremely straightforward approach to creating static websites made with WordPress: you create a site using the tools you like and then generate a static version of it using this plugin. After that, you simply upload those files to the hosting and enjoy.
Remember that filters, feeds, comments, forms, and other dynamic elements will not work there because they need a database. However, you can use external services or some workarounds. Also, some JavaScript libraries might not be included in the package generated by Simply Static (because the plugin crawls the site and might not “see” some elements); in this case, you can add them manually and regenerate the package. This video will help you to deal with such issues:
There are more plugins like this, and you can choose the one you like the most, but Simply Static is one of the most popular so far.
Strattic
Strattic is a tool acquired by Elementor in 2022, and it’s an all-in-one static site generation and hosting platform. So, after purchasing the plan, you create the site as usual and then push it to be static right from the admin panel and get the ready static website following the URL. You don’t need to archive and upload anything, like with Simply Static, and there are some other perks, which you can learn about in this video.
Atlas
WP Engine, another giant of the WordPress world, also recently made an investment into its headless future and developed Atlas. They developed the Faust.js framework (based on Next.js and React), and this tool is definitely for more complex projects and developments, not just publishing some promo pages. Also, with this tool, you convert an existing site into a headless one but need to build from scratch.
Headless WordPress and Crocoblock Plugins
Most of the functionality of JetPlugins can work on the headless architecture, except JetSmartFilters and some functionality of JetEngine. You can check out this list about Crocoblock and Strattic compatibility.
Andrew Shevchenko, Crocoblock’s CTO, is definitely the right person to ask when it comes to relationships between JetPlugins and headless WordPress. And this is what he thinks:
“Speed and security are the main advantages of headless WordPress. Seems like these are just basics, but they are actually the most popular questions and issues in the community. And, well, that’s where advantages end, but these two things are so critically important that there is no point in looking for something else.
The main disadvantage, as often happens, is the flip side of the advantage. The problem is that the headless WordPress site is actually a bunch of static HTML files, and while it is really fast, there is no server part that makes requests to the database and produces complex calculations. And since it is a static file, we can’t use dynamic content properly. In the case of Crocoblock, JetSmartFilters will not work, as well as Dynamic Visibility, Data Stores, and Forms.
Headless sites that don’t use WordPress solve this problem by using AJAX (a standard approach to exchanging information between a browser and a JavaScript server) and REST API. That is, the site remains a static HTML file, but if the user needs to interact with it (not just view the content), it happens by using the REST API of requests, which are already processed on the side of some server.
In the case of WordPress users (and Crocoblock users in particular), it would also be a perfect combination of a static site with dynamic elements working via the REST API. That’s why, on our part, we have plans to convert our products that now use a standard WordPress approach of processing AJAX requests to the REST API and achieve the same functionality of filters, data stores, lazy load listings, etc. But there are a few potential problems, so we can’t make this transition quickly yet.
On the other hand, there is a problem with services or plugins that offer ready solutions for static websites based on WordPress. I only had experience with Strattic, and the issue with them is that the REST API of the WordPress core is not available from the static version of the site.
There are plugins that can generate a static version of the current site; perhaps there is a way to solve this problem.”
FAQ
Jamstack is an approach to building sites and applications that separates the front end (or the experience the client gets when interacting with the application) from the back end, where data and business logic is maintained. It stands for JavaScript, APIs, and HTML markup. This is the approach headless CMS has.
Yes, because you either need to use special plugins (which offer the full functionality with the Pro version) or special, really expensive hosting (like Strattic). Not to mention that for a custom build, you need to hire highly skilled developers, and it will cost you an arm and a leg.
It’s not very correct to compare them because, for some projects, headless WordPress will not work at all, while for others, it can boost performance and security or even be a solution as a basis for complex distributed systems.
The Bottom Line
Although headless WordPress won’t put an end to the traditional WordPress as we know it, it is a viable solution for companies big enough to bear the expense of setup and upkeep. As always, everything depends on the project and its goals.
There are also cheaper solutions to convert your WordPress website into a static site, and they are definitely worth trying if you want to boost performance (and it’s fine for the project to lose some dynamic tools).
