A headless WordPress architecture disconnects the frontend from the backend, which opens up many possibilities for the technologies that a developer can use to build the client. The WordPress backend serves platform-agnostic JSON data that can be used to create multiple web apps, iOS or Android apps, desktop apps, content management tools, etc; the possibilities are endless! However, this leaves you as the developer with many more choices to make. To build a standard headless WordPress web app, a developer will need to select an API layer (WPGraphQL or the WordPress REST API), choose from an ever-growing list of frontend JavaScript frameworks, potentially add a solution for building content models, and decide on a hosting platform. The flexibility of the tech stack options for headless WordPress can feel intimidating! Let’s break down these choices and give recommendations on what WP Engine’s Developer Relations team feels to be the “happy path” for headless WordPress developers.
API Layer
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.
The REST API comes bundled with WordPress, however, the data access pattern that it requires can be slow for the developer because it requires multiple round trips to reconstruct a fully modeled post, for example. REST requires each resource to have its own endpoint, so to get a post with the author and category would be three separate API calls. In contrast, WPGraphQL allows us to ask for a post with the author and category all in one request. Because of this, WPGraphQL is our preferred API layer. WPGraphQL is a free plugin that provides an extendable GraphQL schema and API for your WordPress site. WPGraphQL is faster than the REST API because it gets the exact data that is asked for as well as fewer functions executing through query optimization, less data downloading, more efficient data loading, and multiple resources included in a single request. For more information, watch this in-depth comparison of WPGraphQL and the WordPress REST API.
Our recommendation: WPGraphQL
JavaScript Frameworks
A headless architecture gives developers the freedom to choose from any frontend technology stack, with frontend JavaScript frameworks being the most popular. Some of the most popular frontend JavaScript frameworks include React, Vue.js, Svelte, and Angular. New JavaScript frameworks are being released all the time, so this list is nowhere near comprehensive.
Many JavaScript frameworks are used in conjunction with meta-frameworks that add solutions for routing, server-side rendering, etc. React is used in conjunction with Next.js, Vue.js is used in conjunction with Nuxt.js, and Svelte is used in conjunction with SvelteKit. Gatsby is another popular meta-framework.
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.
Our recommendation: Faust.js, used in conjunction with React and Next.js
Content Modeling Tool
When developing your headless web application, you may find that you need to add extra content fields or post types. The Advanced Custom Fields plugin allows developers to easily create custom content models and custom fields.
You will also need to install the WPGraphQL for ACF plugin if you want to use WPGraphQL as your API layer. This plugin is a WPGraphQL extension that exposes ACF data via the WPGraphQL schema. It is not yet available in the WordPress Plugin repository, so you have to download the ZIP file from the Github repository and upload it manually onto your WordPress site. Developers can then start querying for their data immediately.
Our recommendation: Advanced Custom Fields
Plugins
When using WordPress, there are always tons of options for what plugins are available. The general rule for headless WordPress is that as long as a plugin does not touch the frontend of the WordPress site then it will work normally.
Good candidates for headless plugins will usually work well with WPGraphQL. Check out this list of WPGraphQL extension plugins. For more options, check out this list of plugins tagged as ‘headless’ in the WordPress plugin repository.
The Faust.js plugin ensures that your WordPress site runs smoothly as a headless CMS. This includes things like smart content redirects and enabling post previews.
Our recommendation: Faust.js and whatever else you need!
Hosting Platform
Since the frontend and the backend are separate in headless WordPress, you would generally have to host each separately and configure them to communicate. Atlas is the only platform on which you can host both your headless WordPress backend and your JavaScript frontend app and easily manage both from a single dashboard.
Our recommendation: Atlas
What’s Next?
The flexibility of tech stack options is one of the major benefits of headless WordPress for a developer! While the decisions can feel intimidating at first, hopefully, this blog post has helped you make educated choices about what you’re building!
Stay tuned for our next blog post to walk through building a simple headless WordPress app with Next.js & WPGraphQL!
