WP EngineSpend enough time in WordPress development circles, and you will notice the word “headless” coming up a lot. Headless, and especially headless WordPress, keeps coming up in conversations, on social media, and in blog articles for a good reason. It’s one of the biggest splits in the development approach in the history of WordPress.
Because of this, more and more project briefs will be specifying a headless approach, and therefore more people will be hearing about headless and wondering if it is right for them.
What is Headless?
“Headless” is simply the separation of your website back-end from the front-end, having the content management system independent of the presentation of that content.
A headless WordPress architecture allows publishers to continue to benefit from the great publishing experience that WordPress provides but at the same time it allows developers and website visitors to benefit from modern JavaScript technical capabilities.
Why is Headless Important?
One of the key drivers of headless adoption has been Google prioritizing Core Web Vitals to the point where website owners are worried their search rankings will suffer if they do not score highly.
“Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.”
– Philip Walton, Web Vitals
Rather than simply measure how long it takes to deliver your web page to a web browser, Core Web Vitals test for response times based around how a human being will experience a web page on their device, and include things like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Modern front-end frameworks are designed to address many of these vital site metrics, and improved Core Web Vitals is just one perceived benefit of moving to a headless architecture.
Simply put, if you choose your headless site implementation correctly it can lead to faster, more responsive websites that scale more efficiently.
But there are more benefits than raw speed.
For example, with a headless setup it is easier to develop multiple user interfaces (e.g., web versus dedicated smartphone apps.)
You also gain flexibility in where and how content is sourced, as the front end of your site could draw from multiple data sources.
Developers and designers get to enjoy a clear separation of projects, and parallel working.
Finally, since your content lives separate from your front-end delivery, it is not as exposed or as at risk to third-party application issues.
Why is Headless Important to You as a Developer?
As mentioned earlier, many big companies are looking for headless-savvy developers as interest grows in headless as a way forward for building websites.
The technologies involved are rapidly growing in popularity regardless, but the massive adoption of WordPress as a content management system (CMS), has driven many from the JavaScript world to check out WordPress and vice versa.
Building on modern JavaScript-based web development tools allows you access to a variety of exciting technologies to add to your site user experience and your resume.
At the same time, adopting WordPress, the world’s most popular open source CMS, as a headless CMS pairs a stable and trusted open source CMS with a rapidly innovating JavaScript landscape.
What are the Challenges with Headless?
It’s not all exactly smooth and easy adopting Headless.
First of all, you often must re-invent what WordPress plugins could provide because your visitors will now interact with a custom front end and not an out of the box WordPress solution. Everything from building a simple contact form through to storefront functionality will have to be reconsidered.
Your content creators might have trouble adjusting to no WYSIWYG because they will be working in WordPress to edit and publish their articles, but it will not be WordPress rendering those articles for the public.
Running essentially two websites (a front-end NodeJS application and WordPress back end CMS) makes running your site more complex too.
User management could be tricky because, again, you are essentially running two websites. What needs to be accessed via the front-end and what happens purely on the back end?
Front-end programming in Headless requires skills and knowledge in NodeJS/React etc which might be a whole new learning curve for developers who previously relied on PHP and MySQL knowledge and designers who relied on HTML/CSS.
Of course, I don’t say all this to put you off, it is just a good idea to know what you are getting into before you embark on a project. It will probably help to understand how the pieces go together so let’s take a look at that now.
How Does it Work?
Traditionally, a CMS such as WordPress, would handle both the front end and back end of a website.
A request comes from the visitor, which is processed and if the request can’t be served by an existing cache, the CMS retrieves the appropriate content along with the correct template, with the results merged and output to the visitor’s web browser for display.
Both publishers and developers work on the same website, and all files, content and functionality essentially live in the same system.
Unlike a regular WordPress website, a headless CMS uses a “decoupled” architecture, where the front end and back end are managed separately as two different applications.
Publishers still manage content in WordPress, but WordPress is no longer responsible for generating the resulting web pages. Instead, a separate front-end, NodeJS application or even mobile app, is responsible for generating and serving the HTML delivered to website visitors.
On the front end, content might be pulled from the database using WPGraphQL or the WordPress REST API to request content and then to render the pages of the website.
Ingredients of a Headless Website
Putting together a headless WordPress site is a little more involved than the famous “Five Minute” WordPress setup.
You will need the following ingredients:
- WordPress CMS for static media and your content database.
- You could pair the Advanced Custom Fields plugin to add the custom fields and the ACF to REST API plugin.
- The Atlas Content Modeler plugin is headless-native, so its’ integration is tighter and more straightforward
- API “Glue” between the front-end and the back.
- The interaction between the WordPress backend and the custom frontend framework happens through the API layer. The API layer will call the content from the WordPress backend and push it to whatever frontend technology the developer chooses. The two options for the API layer are the WordPress REST API or WPGraphQL.
- Front-End to actually respond to visitor web requests.
- WP Engine has developed Faust.js, a JavaScript framework built on top of React and Next.js. Faust.js was created specifically to support headless WordPress web applications. It supports authentication and post previews out of the box, provides convenient built-in React hooks for accessing WordPress data, and more.
How Does Design Work in Headless?
As mentioned before, designing a Headless application is more than editing static HTML or PHP template files. In terms of front-end technologies, we would be choosing from three main options:
- Most headless websites right now are built using ReactJS, including huge brands such as PayPal, Netflix, Microsoft, and Facebook. WP Engine’s Faust is built upon ReactJS.
- Then there is AngularJS, used by Crunchbase, Youtube, Google, Nike, and others.
- Lastly, there is VueJS which is used by companies like 9GAG, Behance, Nintendo, Adobe, and more.
Rather than working on standard HTML, instead you will likely spend much of your time working with and on reusable components.
For anyone wanting to get their hands dirty with React, there is an excellent free tutorial series here The Beginner’s Guide to React.
An excellent resource for UI and component development can be found at https://storybook.js.org/
Getting Started with Headless
For dipping your toe into headless WordPress I recommend you check out our Local application.
Local is WP Engine’s local development tool, and it makes it very easy to work with WordPress locally. You can install the app and create a new WordPress site, including a Headless WordPress site, in a few steps.
Add an Atlas application blueprint and on the backend WordPress app, install and activate the WPGraphQL plugin, which will add a GraphQL tab to your WP Admin sidebar.
Conclusion
Headless is simply the separation of back-end from the front end, having the content management system independent of the presentation of that content.
While there is some added complexity and learning curve, it can lead to faster, more responsive websites, and allow easier development of multiple user interfaces.
Going into 2023, more and more people in the WordPress community will be hearing about headless and wondering if it is right for them.
Programmers and designers will add a lot of value to their resume by being able to speak intelligently about headless and the technologies that go into it.
What Next?
This article was simply a taste to answer your immediate questions, but if you want to go further I highly recommend our guide to help developers learn headless WordPress development from the ground up.
And if you’re eager to jump in and actually get coding, you can always get started with a free headless sandbox account.
Thunkable
raksha
Twine
