What’s The Deal with Headless CMS?

Monet Davenport:
Welcome to Press the Issue, a podcast for MasterWP, your source for industry insights for WordPress professionals. Get show notes, transcripts, and more information about the show at masterwp.com/presstheissue. Flexibility and scalability are major considerations when it comes to web development and a decoupled architecture has long been heralded as the solution. In this episode, Teron and Matt discuss benefits and pitfalls of the headless CMS model and its usage in WordPress.

Teron Bullock:
How you doing today, Matt?

Matt Adewole:
Hi, Teron. I’m doing good. How are you?

Teron Bullock:
I’m well. Today, we have an interesting topic. Today, we’re going to talk about headless CMS and how does it pertain to WordPress and is it something that a developer should use or if they shouldn’t use. Let’s just jump right into it. Matt, could you tell us just a little bit about what a headless CMS is?

Matt Adewole:
Yeah, sure. Headless CMS is just really a way to decouple your contents management system. When it’s headless, it just means you can query your system and retrieve your content, kind of like you query an API and get your results. That’s basically the short gist of it.

Teron Bullock:
Got you. If I am a user or a client who maybe interested in having someone use this approach, I guess what I’ll be looking at is using WordPress as the database and maybe the back end for me to generate my content and the front end would be decoupled from that. Instead of using WordPress to do both the back end and the front end, I have WordPress just doing the back end and the front end can be something like a JavaScript React or Vue or something like that.

Matt Adewole:
Precisely. Your front end can live independently of your WordPress website, so you can use Angular, React, Vue, whatever you want for your front end, and you don’t have to make that using WordPress.

Teron Bullock:
Got you. What is some of the benefits that comes with this approach?

Matt Adewole:
Some of the benefits that I can think of are you can use multiple sources of content. For example, if you had websites on React, for example, and you have multiple blogs you wanted to feed into that website, because it’s decoupled, you can query the different CMSs, the different WordPress blogs and get your contents right on your React site. This also helps with being flexible and scaling and a separate front end allows a developer to improve your speed and performance without having to wrangle your content management system.

Teron Bullock:
That makes a lot of sense. I know one of the things that I’ve heard of with this approach is in the case of React, where you can use components and build your user interface very quickly and efficiently. It will speed up the approach, opposed to having to use the traditional WordPress route where you’re using a lot of functions and you’re relying heavily on WordPress. That’s one benefit that I heard of as well. The other may be using something like Gatsby, where you can create these static websites.

Teron Bullock:
Anytime you’re using a static website, that also will speed up the performance. I could see the angle from a developer’s standpoint, but how about from the client’s standpoint? How would that be beneficial to let’s say a client?

Matt Adewole:
Well, for a client, for example, they can read your websites. Gatsby is a very great example. As a client, loading a Gatsby site because it’s static and it’s served statically, it’s really simple. It loads quickly. It’s snappy, like you said. It doesn’t come with all the overhead of WordPress already on it. As a client, I’ll be able to read your websites, load it up quickly. Then there’s another use case I like with decoupled CMSs, the progressive web apps. For example, I go to your website and you’re using a decoupled site and you serve it on Gatsby or React or some other front end system. Progressive web apps allow me to download that.

Matt Adewole:
All the information will be on my app and I can read that information even though I’m not connected to the internet at a particular time. And then the next time I connect, I can just go update the app and download all of your new blogs, for example.

Teron Bullock:
Yeah, that’s very interesting. I haven’t really delve into progressive web apps like that, but that does sound like a very interesting point. I think on the client side, for me, one thing that could be beneficial is not having to worry about the front end at all. I can develop all of my content and stay in the ecosystem that I’m mostly comfortable with as far as the blog posts that I choose to write, and then I can give this off to a developer team and allow them to, like you said, use Gatsby or whatever approach they would like to use and they’ll be able to bring those pieces of information in through JSON or something like that.

Teron Bullock:
It just allows me to not worry so much about the front end side. I can just stay focused on content management. I can stay focused on developing quality information, and I can allow the developer to focus on what they’re good at.

Matt Adewole:
Yeah, this is so true. From the content creation perspective, all you would have to do is create quality content. You don’t have to worry about how it’s presented because you know that content is going to be pulled into a well developed front end that will present it perfectly to your users. That’s a wonderful point.

Teron Bullock:
Are you familiar with how this affects, let’s say, SEO?

Matt Adewole:
Yes, I have looked into that a bit. Regarding SEO, this will be one of the cons, right? Because as we know, JavaScript and SEO don’t work well together. When you decouple your WordPress site and you’re serving everything on a JavaScript based front end, you are going to have to do a lot of manual work to make sure it reads properly.

Teron Bullock:
Wow. That leads us right into the cons then. What this approach is saying that it doesn’t work well with SEO, so that means that you would have to probably spend a lot more time strategizing on how to get the website to work best as possible for SEO. I think another con that I would bring up would be since you’re decoupling things, you’re not able to rely on a lot of the things that are in the WordPress ecosystem, so things like plugins or the WYSIWYG editor, also may not work the way that you used to them working.

Matt Adewole:
This is one of the things you lose when you decouple your WordPress site is that WordPress has done a lot of work for things like authentication, navigation, accessibility. You lose all of those when you create a separate front end and you’re just pulling specifically just the content from WordPress. You lose access to everything WordPress has created to make it easy for users to use your website. Any of those functions you want, you’re going to have to create them again on the front end part.

Teron Bullock:
Right. I guess it doesn’t have to be said, but I’ll say it any way since a lot of people are liking… Well, I guess there’s mixed opinions on the Gutenberg editor. But for those who are interested in using blocks, those would be one of the features that you absolutely couldn’t use with this approach.

Matt Adewole:
Exactly. Not being able to use Gutenberg could be a con to some and a pro to others depending on who you ask. Some of the cons I can think of are the fact that now when you’ve decoupled your size, you are maintaining two different environments. You’re maintaining your WordPress environment, which serves your content, and whatever your front end environment is. That just requires more technical know-how and you can accrue more technical debt in situations like that.

Teron Bullock:
That’s a good point. This sounds like it definitely wouldn’t be an approach that you would use for, let’s say, somebody that’s possibly creating like a mom and pop bakery shop or something like that, because now instead of just focusing on baking your goods and maybe putting out quality content to lead people to your site and also to your business, now you got to focus on, like you said, the two different parts. Now I got to focus on what the design part, what does the front end look like, and then I got to focus on how my data is being stored.

Matt Adewole:
Yeah, correct. That would be way too much for a mom and pop bakery. I will suggest in that case, you just go with one solution and work your way from there. This will be ideal for someone who already has a website in a different ecosystem and is thinking of doing a lot more content creation, but doesn’t want to change what their website looks like now or doesn’t want to move everything to WordPress, then I would suggest, all right, we just created decoupled WordPress, easy for you to create your content, and just pull it into your existing website or application.

Teron Bullock:
Ideally, who would be the customer or the client for the approach that we’re speaking of where we will take our website from one platform and want to move it over to WordPress or to another platform, maybe you’re moving off from WordPress to somewhere else? Who would be that ideal client?

Matt Adewole:
An ideal client will be someone who wants an application that performs complex functions or that has an application that performs complex functions like maybe location specific functions, a single page application, but wants to move into content creation and content publishing. This would be a great way for them to do that without changing whatever system they have in place.

Monet Davenport:
Thank you for listening up to this point. Press the Issue by MasterWP is sponsored by LearnDash. Your expertise makes you money doing what you do, now Let it make you money teaching what you do. To create a course with LearnDash, visit LearnDash.com. Our mission at MasterWP is to bring new voices into WordPress and tech every day. The new MasterWP Workshop series does just that. Our new live and recorded workshops on everything from code to design to business turn WordPress fans into WordPress experts. Find the workshop for you at workshops.masterwp.com. Use the code podcast10 for a 10% discount. Now, back to the podcast.

Teron Bullock:
Let’s say hypothetically we had a client who was using let’s say Shopify and they reached out and they figured out a way to make, like you said, a single page application using the Shopify platform. They said that now they really don’t want to use the Shopify platform. They want to move over to WordPress, but they want to keep the design that they currently had and keep the application the way that they currently had it. Would that be an ideal client?

Matt Adewole:
In a case like that, that client would be losing all of their Shopify functionality, all of the e-commerce that comes to Shopify. If they want to move something like that, they would have to transfer all their data, all their products to WordPress, and then use an e-commerce plugin like WooCommerce. But say all of that is too much. Let’s say they have 150 products and they have a good Shopify ranking and what have you, and they have good Shopify plugins in place, but they just want content around those products. I know Shopify does some content, but let’s face it, WordPress makes creating content really easy.

Matt Adewole:
Something they could do is create a WordPress sites, query their WordPress content from Shopify and pull that content into their existing Shopify. That way they wouldn’t have to move all their data. Because they’re starting contents creation fresh, in that case, they will require less technical know-how to do that because they’re just starting contents creation from scratch, right? They don’t have to move all their product data from Shopify to WordPress.

Teron Bullock:
A lot of the questions that I’m asking would be things that I would think about if a client came to me and said, “Hey, this is the new thing. I hear everybody want it, and I want you to develop something for me.” It’s like, wait a minute, first, we should figure out if you are even the right client for this, right?

Matt Adewole:
Right.

Teron Bullock:
I guess the question I would ask… Well, first, I would lead into, one, we want to make sure that you’re the right client for it, like I just said. But then the approach that I was thinking listening to what you were saying was if I was a person who had the technical know-how, was interested in making something a little more complicated, would the approach work if I used WordPress back end for my content, Shopify just for my products, and I got this third piece, which I’m thinking would be the front end and I could use a React or a Vue or Angular to just serve my front end.

Matt Adewole:
Yeah, that will be an approach that will work. Say you have a WordPress content site and a Shopify product site and you want one location for all your visitors, all your users to go to. You create a React site and then you pull your content from WordPress and your Shopify products. That would be a good use case. Say a client comes to you and wants to create a decoupled site.

Matt Adewole:
Some questions that are important to ask them is if they’re serving their content on a different site or multiple different sites, if they need to separate their front end from their WordPress or from their content management system, if they already have something going and they don’t want to interrupt that, they just want to bring in content, those would be good reasons for them to create a decoupled WordPress site, right? One scenario I thought of that would really illustrates this is, say five years ago, I created a web application.

Matt Adewole:
Now, this web application was just to collate information about businesses around me and then updates that information based on the status of the businesses, on the branches, their locations, their prices. Now, five years in, I have this wonderful website built on React. It’s also an application that people can download, a mobile application that people can download. In a case like that, when I want to start creating content, I want to start talking about the businesses in our areas and giving people insights that they didn’t already have, then I can create a WordPress site strictly for content and just pull that into my mobile application or my web application and serve it on mobile as well.

Matt Adewole:
What’s happening there is I’m not moving everything on my data to WordPress. I’m instead bringing all of my content from WordPress into my existing web application. That’s an ideal scenario for people to use a decoupled CMS.

Teron Bullock:
Wow, that makes a lot of sense. I already have an application and I’m just adding this layer to it, and that layer would be the content portion of it.

Matt Adewole:
Yup.

Teron Bullock:
Yeah, I like that. This sounds to me like the market or the target audience for headless CMS would probably be like 10%, just throwing out a number, but maybe 10% of the people would actually benefit from this, the average client would benefit from traditional WordPress.

Matt Adewole:
Oh, yes, very much so. This is why I still recommend WordPress today is because most of your solutions can be done on WordPress as is. It’s great. It keeps on improving, and there’s already so much built into it to help the average user. Headless CMS rose to popularity with the rise of front end frameworks. Remember the React and Angular season? Sometime around 2016 there was a real hype. This is when people started doing a lot of acrobatics basically with front end. People loved single page applications then.

Matt Adewole:
People were thinking, “How can I do this with my WordPress site?” That’s when WordPress decoupled. Headless WordPress came into the forefront. But like you said, not very many people need to go that route. A normal average working WordPress site will do the job for most of our needs, at least today.

Teron Bullock:
I will admit that I’m one of those people that I guess fell into that front end framework mindset because that’s what led me down a rabbit hole of headless CMS, to be honest with you. I was studying React. Just I guess the way that my brain works, I love when I can use a component, especially if I could find and build let’s say like a button component would be very simple component. But if I could find and make this really Swiss Army knife button component that I can use everywhere, I love things like that because I don’t have to now reinvent the wheel. I just take that button component and I use it over multiple projects.

Teron Bullock:
Because I’ve written certain things into the CSS or even into the JavaScript, I can just pull out what I need from it without really having to touch the structure. That mindset of, like I said, this React kind of way of thinking about things made me think about how could I do that in WordPress and leverage both systems. I really like WordPress and the back end is phenomenal to me. I think anytime that a client comes to me and says, “I want to make a website,” and the first thing I ask is, “What do you want to do?” If they say, “Well, I do want to generate content,” I automatically say, “Let’s go to WordPress because this will be simpler for you.”

Teron Bullock:
Obviously with the tools that are in the back end, it’s just usually native to most people who have been around any computer or a word pressing document or processing application or something like that. Like I said, I fell down that rabbit hole of I really like React and I want my WordPress to be React, but it’s definitely two different things.

Matt Adewole:
No, I will be right next to you standing and admitting I fell into that rabbit hole too. The idea of a super component to rule them all, it really captivated me for a while there. But yes, WordPress, like you mentioned, has such a great interface. Someone just coming in will be able to use it and navigate it, right? But then there’s some fancy things we, developers, always dream of doing. Multi-step forms, for example. React makes that look so easy, but that’s really difficult to pull off in WordPress, right?

Teron Bullock:
Indeed.

Matt Adewole:
There are sometimes when you want to do things really fancy that you might need to decouple. But like we mentioned, you’re going to be losing a lot of the inbuilt functionality that’s already in WordPress.

Teron Bullock:
Just to kind of wrap things up, I guess what we are saying is know your use case first before taking this approach because the benefits that you gain from traditional WordPress, you basically lose with this approach. Does it make sense if you are a WordPress user to move away from traditional WordPress in order to go to this route? That’s something that you have to weigh for yourself. For the most part, it looks like maybe 90% of what you’re trying to do can be accomplished with WordPress and it doesn’t make sense to add on this layer of complexity just to decouple your site to say, “I have the use of a framework and my WordPress.”

Matt Adewole:
Yeah, that would be accurate. The know your use case and most of the use cases that will require you to decouple are fringe cases anyway.

Teron Bullock:
Absolutely. We would like to continue this conversation. If you agree with us or disagree with us or have something to add, feel free to join us on Twitter @_MasterWP. Matt, it’s been great talking to you.

Matt Adewole:
It’s been great talking to you too.

Teron Bullock:
All right. See you guys later.

Matt Adewole:
Take care.

Monet Davenport:
Thank you for listening to this episode. Press the Issue is a production of MasterWP. Produced by Allie Nimmons. Hosted, edited, and musically supervised by Monét Davenport, and mixed and mastered by Teron Bullock. Please visit MasterWP.com/presstheissue to find more episodes. Subscribe to our newsletter for more WordPress news at MasterWP.com.