Headless WordPress has been gaining increasingly more curiosity from builders and internet hosting firms alike, particularly over the previous few months. With WP Engine launching their Atlas internet hosting and increasingly more builders preferring Javascript frameworks to energy the frontend of their websites, headless WordPress appears to supply the very best of each worlds: a well-known editorial expertise on the backend with the pliability to select a contemporary tech stack on the frontend.
Nonetheless, for all the advantages of headless WordPress, there are positively some drawbacks as effectively. Not each internet hosting atmosphere is about as much as deal with headless WordPress natively, so in case you’re used to a extra conventional WordPress setup, you will have to get artistic along with your internet hosting.
As well as, as a result of the frontend and backend are separated, among the items of WordPress which can be usually included must be recreated or on the very least reimagined.
On this article, we’ll check out among the use instances the place headless WordPress actually shines in addition to among the conditions the place you might need to stick to a extra conventional WordPress setup. And in the long run, hopefully provide you with a greater concept as as to whether headless WordPress is an effective possibility on your subsequent undertaking. Let’s dive in.
What’s Headless WordPress
Whereas a conventional WordPress setup runs on a server that each supplies the backend for editors and content material creators in addition to serves up the template and all the things else to make the web site look good on the frontend, headless WordPress is a time period used to explain when the frontend and the backend that makes up a WordPress website are separated.
Which means that, whereas the normal WordPress backend expertise is similar, WordPress is just not liable for serving up any template or theme-related content material.
In a headless setup, WordPress outputs all of the content material of the location by way of API endpoints (normally both the WordPress REST API or WP GraphQL). These API endpoints are consumed by a separate frontend that’s solely liable for dealing with the show of the content material.
In lots of instances, this can be a website put along with one of many common Javascript frameworks, a cellular app, a dialog software powered by Alexa or Google Residence or virtually any interface that may devour content material by way of API. Check out the WPCasts video under to see what that might seem like.
This makes a headless WordPress website way more versatile by way of how the content material might be offered. With a conventional WordPress setup, you’re largely locked into the output that’s managed by the theme, however with headless, you possibly can output the identical content material and have it offered to your finish customers in many alternative methods as a result of the presentation is managed by the platform that in the end consumes the API endpoints.
Advantages of Headless WordPress
Headless WordPress continues to develop in reputation as a result of for some developer and content material groups, there are positively some robust advantages to a headless setup.
Totally different groups can do what they do finest
Some organizations, even software program companies who make use of builders, discover that whereas the advertising and marketing division needs to make use of WordPress for the advertising and marketing website, it doesn’t overlap with the skillset of their present builders and so they find yourself outsourcing this work to an company or a freelancer who’s extra WordPress-centric.
Nonetheless, with a headless WordPress setup, inner builders can select to make use of no matter frontend framework they wish to develop the frontend of the location, leveraging their present expertise even when they don’t have any expertise with WordPress.
The WordPress-specific work can then be outsourced and linked with the in-house frontend by way of API, doubtlessly saving on price to develop the location in addition to permitting all of the model and company-specific information that’s in-house to come back by way of on the frontend of the location the place there could be one thing misplaced in translation in any other case.
Editorial can use the WordPress they’re acquainted with
When you’ve got an editorial crew or content material creators which can be already acquainted with the WordPress modifying expertise (which is increasingly more frequent as WordPress takes over much more market share), you don’t must determine between letting your frontend hold updated with the very newest applied sciences and giving the content material creation crew an expertise they’re acquainted with.
By utilizing a headless WordPress setup, the content material creators can proceed to provide content material within the WordPress expertise they’re acquainted with, whereas the event crew is free to make use of no matter frontend applied sciences they’re most snug with.
Backend APIs can energy totally different platforms
When working with a headless setup the place WordPress is powering API endpoints as an alternative of merely serving up frontend templates, you might have the pliability to have these endpoints push content material to interfaces apart from only a web site.
The identical API endpoints that output your content material to the online also can energy cellular functions, interface with one other CMS that powers a print publication, be the content material supplier for a voice software with Alexa or Google Residence and way more.
As a result of so many interfaces are set as much as devour APIs, utilizing WordPress as a headless software actually broadens the probabilities for the place you need to use and reuse the content material you’re already writing in WordPress.
Drawbacks of Headless WordPress
Whereas there are some advantages to a headless WordPress setup, it’s positively not for everybody. If you’re used to a extra conventional WordPress expertise and don’t match any of the conditions above, listed here are among the potential drawbacks you’ll need to take into account earlier than leaping in.
Plugins don’t at all times work
Most individuals have the impression of WordPress and the WordPress ecosystem that in case you want extra performance on your website, you possibly can go in search of a plugin that gives that performance, set up it and “it simply works”, typically with none code or configuration vital.
Nonetheless, with a headless WordPress setup, many plugins don’t work out of the field, as they aren’t essentially conscious that they’ve to supply their performance by way of API. For some plugins, that kind of habits isn’t even doable.
Take, for instance, a plugin that provides social share hyperlinks to the highest of the one publish web page to make content material extra simply shareable throughout the varied social networks. With a traditional WordPress set up, this plugin might be activated and the social share icons might be simply injected routinely or utilizing a shortcode or one thing and you’ll be all set.
Nonetheless, with a headless setup, these social icons aren’t transmitted by way of the API output, as a result of they don’t exist within the publish content material. And even when they have been one way or the other added to the output of the API endpoint for a specific publish, they wouldn’t present up on the frontend of the location until the frontend was particularly constructed to search for that output and show the buttons. Whereas not inconceivable, this makes many WordPress plugins extra time consuming to implement in a headless setup.
WordPress-familiar groups don’t at all times “get” headless
In case your builders or improvement crew is already acquainted with a extra conventional WordPress setup, the place show logic exists within the theme and most customizations are made to theme recordsdata, shifting that mindset to work with a headless setup can typically be tough.
Even from a improvement course of perspective, a headless setup typically requires a shift in how model management is used, how automated deployments and internet hosting are arrange and dealt with, and will increase the necessity for communication, particularly if two totally different builders or groups are engaged on the frontend and backend items of the location. All of these items are duties that builders used to working all collectively in a extra commonplace WordPress theme might have by no means needed to take care of earlier than.
Debugging can turn into harder
Any system, whether or not it’s distributed or extra of a monolith, can have bugs that come up throughout the course of operation. One of many challenges with distributed programs, nonetheless, is there’s a lot extra information and so many extra selections you need to make when attempting to debug a difficulty. For instance, with a headless WordPress setup, in case you expertise a difficulty with posts not loading within the order you’ll anticipate.
To even get began debugging this subject, you’ll first have to determine whether or not the problem was with the entrance finish portion of the location or with the backend. As these are doubtless hosted two separate locations, you would wish to then discover the proper log file for the system the place you thought the bug was originating.
If there was an issue on the backend, for instance, the place it was not offering the proper posts by way of the API endpoint. For those who have been debugging a traditional WordPress website, you would possibly attempt to echo or var_dump some debugging data after which see how that data comes out on the entrance finish as you debug.
Nonetheless, with a headless setup, this data received’t seem in your template, however relatively your API endpoints. And relying on how your API endpoints are configured, this kind of debugging won’t work in any respect.
Particularly if the work of sustaining the entrance finish of the location and the backend of the location is break up between two totally different groups, debugging a headless WordPress setup is usually harder and entails extra communication {that a} extra conventional WordPress website. Particularly in case you’re not as skilled with debugging distributed programs, this could be a a superb motive to desire a extra simple setup.
WYSIWYG is harder
One of many key guarantees of the Block Editor in WordPress it that it strikes your WordPress expertise a lot nearer to one of many beliefs of many CMS platforms – offering a “What you see is what you get” expertise as content material strikes from the editor to the frontend of the location.
Nonetheless, on WordPress websites the place the block styling within the editor is in a separate codebase from the entrance finish show, it finally ends up being a bit harder to maintain these elements in sync. When any adjustments are made within the frontend codebase, these adjustments have to even be communicated and mirrored within the editor types to maintain that consisent WYSIWYG expertise.
As with a few of our different downsides of headless WordPress famous above, this simply signifies that extra communication and group is critical to maintain the 2 codebases in sync and offering the very best expertise for each the content material creators utilizing the backend, but in addition the top customers experiencing the frontend of the location.
So which is best?
For those who’ve gotten this far you possibly can most likely anticipate this reply, however whether or not or not it’s best to use headless WordPress on your subsequent website undertaking actually is determined by you, the crew that’s engaged on it, how the undertaking is deployed and plenty of different elements.
When you’ve got a robust frontend crew that’s snug interfacing with APIs and is used to speaking adjustments and dealing with extra distributed programs, then it’d make sense for them to deal with the frontend of the location whereas a separate crew works on the precise WordPress piece.
Nonetheless, in case you’re extra of a solo freelancer or don’t have quite a lot of expertise in additional distributed programs, model management, deployment, and many others, it’d make sense to stay with a extra conventional WordPress setup.
Headless WordPress could be a highly effective paradigm that lets you leverage trendy applied sciences and bridge the hole between an editorial expertise that content material creators are acquainted with, whereas nonetheless with the ability to use some newer tech that hasn’t come to the WordPress ecosystem but.
And because the developer tooling round headless WordPress continues to get higher with headless-specific internet hosting and different instruments designed to make creating in a headless setup simpler, it would solely turn into extra accessible for extra builders and types.
Briefly, headless WordPress is right here to remain and, if used accurately, could be a useful gizmo in your toolbox as you construct your subsequent WordPress website.
