Headless WordPress Overview | Real World Headless WordPress Example

how's it going everybody in today's video I wanted to kind of go back through my presentation that I gave at wordcamp in Salt Lake City this past weekend so it's gonna be about headless WordPress kind of some of the pros and cons of how we use WordPress today and what some advantages and disadvantages might be with headless if you're new here make sure to subscribe and ring the bell to make sure you get notified of my weekly WordPress tutorials alright let's jump into it alright so first thing is first let's talk about what I am going to be covering here so I'm gonna be going over what I lovingly refer to as vanilla WordPress that is just kind of WordPress as we know it today next what headless WordPress is and when it would make sense to use a headless WordPress setup next we'll also when it would not make sense and finally we're gonna go over a real-world example of when headless WordPress would make sense and I feel like that's where it kind of ties everything together so what is vanilla WordPress so right now we have my site calm and we have our server setup and we have WordPress installed on there we have PHP and we have MySQL as our database and then those three together give us kind of our HTML output and then we tack some CSS and JavaScript on to it and then we have our site we have my site comm on top of that outside of what I would kind of still call vanilla WordPress we do have the REST API and you can have that feed and information into an outside source like other site comm both run by us but that is information that can be passed along to other pieces and that's kind of like a step in the headless direction so I took refer to vanilla I'm talking about what's on the left side of the screen so what are advantages of vanilla well you have PHP top to bottom in PHP is super fast and it's super reliable we've if you've been working in the WordPress community you have used PHP of course and you can tell that it's gotten faster and faster over the years so it's a great tool to have on our tool pub super familiar so you know to do things and you can be pretty agile with it it has a large open-source community so when you need to find tutorials such as this one or you know how to do things you can pretty reliably find things with newer technologies it's a little bit harder to find established content like that we are maintaining one thing in this sense and that's probably going to be your theme that you are creating for your client if you have a custom plugin maybe you're managing a little bit more but like in most cases you are dealing with one repo online all your HTML CSS and JavaScript is in one spot which is great and then you can pull down the one repository you're you're probably running composer and NPM and then you're good to go you have plugins plugins in WordPress are awesome there's an insane amount of free plugins and there's some super powerful premium plugins some of my favorites are Yoast SEO custom post type UI advanced custom fields Pro query monitor and then for image optimizations I've recently started using short pixel in need of dub dub but I usually tend to go towards smush but I'm starting to move more towards the other two and then of course WP rocket some honorable mentions or WooCommerce gravity forms regenerate thumbnails and much more I will have links to all of these in the description and then themes sometimes I have super mixed emotions about themes I love starter themes for development but grabbing a theme off of theme forest is something that I rarely do anymore it's good for techies but mostly a hassle for developers to kind of tangent off of that I really only suggest buying those kind of themes if you're gonna hand it off to like you know your cousin needs a photography site that's the thing that I would use a pre-built theme for something I don't want to build custom I just want to just get it out the door instant publishing when you push publish your content is live when we get into headless we'll realize why that's a pro here in vanilla you can have that WYSIWYG experience you have stuff like Elementor where you have that iframe to the right and you can drag stuff in and you get a preview of the page even before you hit publish so that's a huge advantage and then you get that instant feedback of oh my text doesn't look quite right it's wrapping right here let me adjust something it's performant if it is done right WordPress gets a bad rap for performance but that's not always true but it is sometimes WP rocket and other caching plugins can sometimes hide those issues by pre-k or by caching the pages after they have been visited by a user so if you go to the about page you load a bunch of images and your HTML your CSS or JavaScript WP rocket will grab that and spin it into an HTML file that the next visitor will just get served so it can kind of hide any sort of blemishes behind the scenes and again WP rocket is a link in the description as well the rest api can be slow and that's a reason why i'm going to be bringing up some other technologies later to maybe replace that but the big problem with the rest api in my opinion is that when you hit a route it is asking all the plugins and stuff hey do you need to do anything with this before i send it back and that can be a big problem if you have greedy plugins installed plugins and themes can be the culprit sometimes if you install those very fancy do-everything themes you're gonna have a lot of libraries and stuff that you're probably not going to use but you're paying for it on page load plugins on the other hand are things that I think you can have like a thousand of not really but you can have quite a bit of plugins and not slow down your site it's all about what those plugins are doing on your site to make it slow so if you install a pretty shady slider plug-in then all of a sudden it loads three javascript files and two CSS files on your site now all of a sudden you're having to pay for all that when all you want is a slider and there's much better ways to go about it but that can slow down your site if that kind of stuff happens over and over again you can spin up sites super quickly with vanilla WordPress you essentially you can spend something up with like something like flywheel or pre-made docker images and then you install some plugins you install a theme if that's what you want to do and then you throw it up on some cheap hosting you have a wordpress site awesome that's really great it's very fast so it's for clients and devs it is very friendly for both the user interface for clients and content publishers is awesome they're super familiar with it even things that we love to use like a CF and Elementor and stuff like that those are ones that most people know how to use its developer friendly we know how to Google things and there's lots of tutorials for people who google things and you know you probably found this video the same way and there's a large community of people looking for this kind of content and and WordPress content in general and that's a nice part of the WordPress community so some disadvantages of vanilla PHP template it's not great there's some tricks to go around it like with twig and timber and all that kind of stuff but for the most part I mean reacting all those other kind of things when you're actually creating components and stuff like that you find some really nice ways to good about go about creating components and getting things on the page that it's a little bit harder to do in PHP so good not great plugins that are amazing until they aren't we kind of talked about this they can actually get you a great head start on your projects such as advanced custom fields and stuff like that and it saves a lot of time and money if you can do a thing where you know your boss comes to you and says I need this kind of thing done and there's a plugin that exists for as long as it's a reputable plugin you build it or you install it and then you publish it and you've saved the company tons of money you've saved a bunch of time and you can move on with your life but some plugins can go unmaintained or have security holes or cause bloat that actually happened to us very recently at the job where I work now we have a bunch of sites and one of them was using a plug-in and we tried to run a build on it and it was failing because one of the plugins couldn't get pulled down from the WordPress repository why was that one of the had a security hole in it they were super-good about actually getting that fixed and they were very good about informing everybody that that plug-in was being fixed but we simply could not deploy that site without having something like that fixed so we kind of had to sit on our hands for a little bit which was annoying but it's kind of the nature that beast sometimes performance needs attention plugins can help with this such as WP rocket lazy loading images and optimizing them is a thing that doesn't just happen out of the gate with WordPress you have to make it do that and then same with minifying and concatenate being your CSS and javascript you don't just get that out of the box that's something that you have to actually do yourself and set up and then you need to be smart about API calls and stuff that's just not necessarily WordPress specific but I bring it up because transients are a thing that you should be storing you some of your API calls in and caching them in the database and that's kind of why I have this next bullet point is because that's what will make the response times much faster the backend and front-end are tightly coupled this makes it harder to redesign and make updates so if you are very heavily integrated with ACF and then all of a sudden you need to do a redesign and there's different content on that page makes it a lot harder to shuffle things around and make design updates because everything is so intertwined if you won't need to move away from WordPress to another front-end framework that's even harder you're very much integrated with how WordPress handles all of its stuff so you need to be aware that that's something that would become an issue if you decided to switch away from it PHP is cheap but it's not free time to first byte can be a killer and as you start to need to use PHP more and more as your site grows you're simply going to have to scale your site to more expensive hosting plans and when you've got databases and PHP land and server you need lots of server computing to happen before you can show the user their webpage it's going to get expensive so what is headless WordPress then so this is a graph of kind of what I think a headless WordPress setup would typically look like so you have PHP MySQL and WordPress up there at the top and then you are keeping all of and you're not rendering any content on there I feel like that's something I have to specify you're not rendering any content through WordPress you're simply using WordPress to store your data and then these two places down here at the bottom we have our website over here and then our mobile app over here is requesting data through either something like the REST API or WP graph QL whatever you fancy so what are some of the advantages to doing it this way you have the freedom to use whatever you want on the front end and that's a big thing is there's lots of front-end technology's nowadays that can improve the experience for the user such as Gatsby and we'll be getting into that quite a bit here but now you can use your WordPress data and you and the content editor get a good experience of working with WordPress but then your user can have a good experience working with a statically generated site like Gatsby so you can use anything like that or you can do something like what we showed at the beginning is you have one store for your data and you are using an API to broadcast that data to in a website and a mobile app so whatever makes sense for your project you can publish the same content any platforms just like we saw and then you can do things like I mean this if I were to go back here you can make this list down here at the bottom as big as you want there could be a couple different phone apps there could be a couple different sites like an internal site for your company or something like a CRM for like say you have a sales team and we'll be getting into that kind of stuff later but that's the kind of thing that you would be able to do you have one set one place to store your data that's broadcast out to many let's see here potentially share code between platforms and we'll have a graph that shows that but you can utilize component libraries to share site things from site to site and from site to app and all of the above these are if you're using something like react we can actually share react components from one to the other with some with something like an via NPM and then you can pivot at any point the site that won't either the site or the phone app can be any language that can hit an API which is a lot so you can use Gatsby for a little while and say you don't want to use Gatsby later then you can switch to something else or like view or something like that and then all of a sudden you can it's a lot easier to pivot because you just consume the same data just with a different front-end so yeah if you need to go to react native to Swift in Java you don't have to really worry about it you can just you know throw away one and then build up a new one consume the this M data over again and you're not having to worry about the content inside of the app or anything like that so what might be some disadvantages to doing it this way the front end the back end are two different technologies now all of a sudden you need to know something like PHP to be able to put together like rest routes or being able to extend WP graph QL or something like that you need to know PHP to extend WordPress if you need to be able to make custom interfaces inside of there and then now whatever front-end framework you're using you now need to know that too so if it is Gatsby you need to know react now if you can't do both then you're probably going to need some extra help or you're gonna have just all harder time getting your feet underneath you you're not hosting your code in different places this is not that big of a deal but it is something to be aware of especially as you grow because different hosting companies will help you scale in different ways and you're gonna need a scale differently because you know if you are using gasping on the front end you're really only hosting static files and so you need to have a workflow to just get static files out on the internet and then with WordPress you are it's a server that needs or it needs to have a server that has a database and all this kind of stuff and different hosting companies are not going to provide that and so you need to be able to adjust for that so different house might have different workflows so being able to do one thing on one site and have it integrated with get on one and you might not be able to do that on another so for example like you're hosting your Gatsby static pages on net LeFay which can be integrated with get or and your wordpress site is on a shared hosting on Bluehost and you're not going to be able to just use get on a shared hosting and Bluehost so now you have to figure out another workflow for that and that can be kind of a pain and then so if you have to build and maintain that it's pain in the butt and there's no instant feedback if you are publishing your content on to WordPress and you're using something like Gatsby Gatsby has like a build process and so something like the preview button is not going to work and then you are limited with plugins as well because if you want to install a slider you don't just install the slider and then have it show up on your front-end that is going to be something that you have to manually hook up it's a lot more work up front there you have to create the API you can install something like WP graphic you'll get a lot out of the box but as things go on you're probably going to want to extend that to some degree same with the REST API you're gonna want to be able to extend that as well so you're gonna have to create the API for that and extend it out someone has to build out the front-end to and that's a lot of work as well because you're usually it's not starting from scratch or you are starting from scratch there can have a big learning curve and that is something that I found pretty difficult is being able to kind of think in both worlds but it's something that once you get over it it's not that big of a deal can simply be overkill that's a big one so then that's what we're going to be jumping into next this doesn't work for everything it just simply could be you know do you see a spider you throw a grenade at it it's not really something that is worth the effort so when would it actually be a good idea when you anticipating publishing on multiple platforms so if you need to publish your same content from WordPress that has your blog posts and your users and lots of meta information on a public-facing website and a phone app and a watch app or something like that that would be a great time to do this because you're not having to create reap replicate the content in a lot of different places and so yeah when you need to have that content up here across multiple services so if you have a public-facing website or like a client relationship management system when you need to take advantages of modern frameworks like Gatsby that's a big one right because WordPress by default doesn't do all the things that Gatsby does by default and if you want to take advantage of that and plus all the things that Gatsby does this would be the right way to do that and if you just want to try it by yourself and you're not looking to you know take advantage of everything about it but you want to give it a try like on your personal site or something like that go for it like it's overkill but it's the right kind of overkill because you're learning when is headless WordPress a bad idea you need to rely on plugins or themes so this is a great example for your handing this off to somebody you don't want to say here's WordPress which you know and love and probably know how to work but here's a giant list of things that you just can't do and that's going to be a little bit difficult for some people to swallow like okay well I paid you to make a wordpress site but I can't install plugins that I want I don't like that so that would be a good reason not to do it so exactly you're handing this off to someone who isn't tech savvy because you're going to need to be able to trigger builds and stuff like that and they're not going to quite understand how that works or why or anything like that don't do it it can be overkill as as as much fun as a wordpress instead less WordPress setup could be it could simply just be overkill so here's the big one this is the one that I kind of write say all that other stuff too hopefully illustrate this real-world example well so let's say that we have a car dealership and we need a couple tasks we need to complete a couple tasks where our boss comes to us and says thank you for joining our team I have a very successful car dealership but I don't have a website I don't have a CRM and if you're not familiar with those that so a way for like sales people to keep track of sales and and and people that might be interested in cars things like that and then a mobile app for their users so like their users can be wandering around the the car lot and say and pull up their app and say and ping like a Salesman and say hey can you go get me the keys to this like Honda Civic or something like that so we have three places where we're going to need to have same or in similar content so how would we go about this this is me personally what I would do in this kind of situation I would have a wordpress set up and that is not public-facing at all that is simply for internal use so that's where I'm going to log in and make any updates to things that I need to update that's where people are going to like people in the front office are going to be entering in new information about cars and new arrivals deleting cars that have been sold that kind of thing and then it would be managing users like salesmen and things like that so people who can log into the site and then update some of the stuff that they need update and then I would not use the REST API I would use WP graph QL there's some reasons about that and let's actually just dive right into it so first we use WordPress it's the source of truth of our data the employees can enter in information kind of stuff that I talked about already so we're gonna use WP graph QL y WP graph QL is much faster when you send data in there it becomes a single request rather than multiple requests and it is front-end focused if I need something that is going to give me a car that I need to make the year and the model then I can you be on the front end of the of the site in react and say those are the things that I need from the API and then if I needed to add in well I also need all the pictures of that car on the front end I can ask for those pictures of the car and not go back to PHP and the REST API and modify my route and then it's query agnostic it knows if you're asking for meta and categories ahead of time so if you're like I need this information about a post and then I need this information about some of the meta and all that instead of making a couple queries it's going to modify this one query that it would make to get all that information for you the rest api can be slow kind of like what we talked about it's asking plug-ins for hey do you need to do anything with this before they send this back to the developer it loads the WordPress core and loads plugins who can be greedy sometimes and there are independent queries that have no idea about each other so you can go you know slash posts and you get stuff all about your posts and then you need well I need you know pages too and then you're gonna hit the pages route and so that's two requests instead of just one which you can do with graph QL and then it has predefined endpoints so if I had a route that's giving me you know the make your model of the car and then I need to get those pictures I'm gonna have to go back to PHP and say hey I need to add in the the pictures into this route and then on the front-end then I can consume it after that's been done and then so we have the CRM and the website what am I going to use for that I'm gonna use gatsby for both this is actually something that I learned earlier this week but the CRM would probably need to be like a create react app type of site where it's not statically generated pages lots of things are going to get updated and deleted very quickly like it doesn't make sense to have a statically generated CRM so I'm going to use Gatsby and Gatsby can have that functionality as well which I thought was super cool I didn't know it did that and then the website would absolutely make sense to be statically generated we come in we get the new inventory for the day somebody enters that all in you run a build and then all of a sudden for that day you have all of the cars that are now available and they're super fast because of its Gatsby it can centrally generate those pages way ahead of time it has a lot of plugins and has offline support so if somebody's got some spotty service as long as they visited those pages before they should have access to them and it's extremely performant so those are things that absolutely make sense to go the extra mile and get it integrated with because you know when you're searching for a car SEO is a big deal because lots of people sell Honda Civics you want to be at the top of those lists and really the best way to do that have relevant content and a fast site with a good user experience which can means that we've lazy loaded our content and actually you can predict user behavior to prefetch content which is also something that I just learned that Gatsby can use something called guest j/s so it'll hook up to your Google Analytics and say hey every time that somebody visits your inventory page they usually click on the contact us link right after so what we're going to do is when they hit that inventory page we're going to prefetch the content page because more than likely they're going to click on it so there's some pretty good awesome things that that it will do for us so and then lastly I would use react native for the mobile app that the users would use I think it's pretty obvious why I would do that but the big kicker at the end is that now all of a sudden you can share components between all three of these because they are react based you can have an NPM package that says it has a bunch of components that you're going to use on all of these pieces of our platform so you have a card and that card has a picture of the car and it has that make the year the model and then the price that's going to make a lot of sense to have on our CRM for the salesman people to take a look at it's going to make a lot of sense for the user who's googling our site because they want to browse inventory and it's gonna make a lot of sense to have that same component on our mobile app because as they're wandering their parking lot they can see what car that they want to request the keys for hit a button and then it sends it to one of our other two places so these are the kind of things that you're going to want to share between and there's no sense in remaking that same component for each one of these platforms there's no need to recreate that so I feel like that's a pretty big reason why going this route is super important so in conclusion use a headless setup if it makes sense if it doesn't make sense don't there are plenty of reasons why you should use it and there are plenty of reasons why you shouldn't I would say really the main reason why you would go this route is if you need to do something that looks pretty similar to this where you need to have a source of truth and that source of truth needs to have data that will be the same on multiple different platforms so these are things that I will feel like would make it make a lot more sense if you're just taking content and you need to output it to a page I mean if you need performance and stuff like that caching plugins and stuff like that can get you pretty far gatsby obviously has the leg up on WordPress's as far as performance goes in a lot of other areas but ultimately I think that this kind of setup is for when you start publishing in multiple places so thank you for watching me ramble about headless WordPress for this amount of time if you liked the video make sure to give it a thumbs up and leave a comment tell me if you learned something or tell me if I am completely wrong and you would absolutely never do something like this I want to hear back from you guys and I love always love hearing back so leave a comment hit the like button if you're new here make sure to subscribe I appreciate you guys thanks for watching and I will see you in the next one

Channel: WPCasts

Views: 30,056

Keywords: wordpress, reactjs, wordpress rest api, headless wordpress, wordpress api, rest api, headless wordpress react, react wordpress theme developm

Id: kU5dUnKav4A

Length: 28min 50sec (1730 seconds)

Published: Wed Oct 16 2019