[Resources] WP as a Headless CMS

👨‍👩‍👧‍👦 Community 📚 Resources
1

I start this thread to have a common place to share resources about WordPress as a Headless CMS. It can also be useful for questions related to this.

We can open other [Resources] threads like this one for different topics related to Frontity.

2

I’ve read this tutorial, recommended by @Reyes. It was written by J.C. Hiatt.

Notes:

There are some intro parts where he talks about WP and JS that seem like if they were written by us!

I also like the way he uses the word decoupled to describe this type of architecture.

He explains how to use CPT UI (custom post types and taxonomies) and ACF (custom fields) plugins to create new post types for your backend.

He is using CRA (create-react-app) and doesn’t mention server-side rendering. He doesn’t use wpapi to connect with the REST API, only fetch.

1 Like
3

I’ve also read the white-paper of Human Made. It was written by Tom Willmot (CEO) and Joe Hoyle (CTO).

Notes:

They talk that WP is “monolithic” and that “on today’s web we’re moving away from that”.

When they talk about WP as a Headless CMS, they say it makes WP “frontend agnostic”.

A headless CMS is used only for data capture, storage, and delivery, making it frontend
agnostic.

They also use the word “decouples”:

Decoupling content management from frontend display

They talk about the increase in performance of Node vs PHP:

There is a significant increase in performance when using JavaScript vs PHP: Node.js, for example, can handle many more requests than PHP due to its asynchronous event-driven nature.

They reference this article: https://www.hostingadvice.com/blog/comparing-node-js-vs-php-performance/

They talk about an improvement in user experience when using JS over PHP:

Using client-side technologies for display means that in-browser experiences are fast, acting in real-time, without having to wait for PHP queries to retrieve information from the database.

They mention three specific cases using the WP REST API with a React fronted:

In the USTWO case they mention a Node server for SSR:

There is a Node.js server that enables server-side rendering

It seemed curious to me this phrase:

It’s unlikely, however, that we’ll see a vast increase in API-powered themes due to the challenges of rebuilding native WordPress functionality on the frontend.

But then they say:

[…] we anticipate the emergence of REST API base themes that rebuild WordPress features on the
frontend. These boilerplate themes will be written in different languages and will provide a starting point for frontend developers to build on.

And go back again with:

[…] it is unlikely that we will see a major disruption to the WordPress theme market. Instead, the REST API will be of most significance to large custom builds and WordPress-based SaaS products.

Well, we are about to make those statements false, aren’t we?? :grin::grin:

Later they talk about the server-side rendering problem with JavaScript proposing an additional Node server:

Developers need to address these issues to ensure that the web stays accessible. One method is to render frontend templates on the server using technology like Node.js and then enhance the website on the frontend using clientside JavaScript.

Mentioning also its drawbacks:

This setup, however, requires an additional server, and developers with the experience to implement it.

They finally mention two react-based themes. One from Automattic and the other one from HumanMade, but they are really old (4 and 2 years respectively):
https://github.com/Automattic/Picard
https://github.com/humanmade/feelingrestful-theme

Conclusion:

I think it’s a really interesting paper. I really like the way it explains everything. This means HumanMade think like us in most (if not all) aspects regarding the WordPress future and the new possibilities opened thanks to the REST API.

It’s quite extense so I won’t say it’s a must-read but, it’s highly recommended.

2 Likes
8

This is a mini-article that explains what’s a Headless CMS and compares it to a regular CMS:

It’s short, but right to the point.