My last post on headless CMS and WordPress kind of hit a nerve somewhere in the WordPress community. But being a developer for 16 years has taught me to be platform/technology agnostic and ditch technologies as and when they become irrelevant. I have practiced this throughout my career. I was once No. 17 in the PHP Yii Leaderboard but ditched Yii for Laravel once it emerged as the better technology choice. So guys, let’s not be fundamentalists about technology, be fundamentalists about humanity. Many from the WordPress community called me personally, cleverly to avoid giving my post any attention than it already got, and raised some points. Chief among them was the WordPress as a headless CMS argument.

Yes, we can use WordPress as a headless CMS decoupling the backend and frontend and using a react frontend or any other client-side development framework. This post is an attempt to analyze that.

Let’s start with the admin panel. The admin panel of WordPress is built on both jQuery and React. So you never commit a client’s request to edit the admin panel. You simply comment on it as being very expensive or impossible.

My main observations on WordPress are related to the legacy on which it is built. As you all know WordPress started as a blogging platform and then somehow stumbled into being a CMS. So when you want to add some new fields to WordPress, you are bending it against its will as a CMS using the ACF plugin(Additional Custom Fields). You do this by writing some custom logic in the functions.php file. To do that, you need to know what functions.php can do and for that documentation of WordPress. Whereas, Payload is a strictly typed typescript CMS with strong IntelliSense support in IDE which warns whenever there is an issue in config. You don’t need to know Payload to develop a when you proceed with the default Gutenberg editor, all the content it generates is rendered as one long HTML string. If you are using headless WordPress, you need to set these as inner HTML. You cannot map it into components as is the best practice in a react app. The same query made in a graphQL IDE on an ACF + WordPress instance takes 245ms and the same in Payload takes 28 ms.

The legacy of WordPress as a blogging platform is the biggest issue here. All the content is stored in a single wp_posts table in Mysql and all ACF fields are in the wp_posts_meta table. This is the main reason for the latency in WordPress when compared to Payload. Whereas in Payload, everything is neatly defined as collections in the structure we want.