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
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 custom post types. This often requires cobbling together and configuring several separate plugins to accomplish. For example, you could pair the Advanced Custom Fields plugin to add the custom fields and the ACF to REST API plugin to properly structure the API calls or a WPGraphQL extension.
The Atlas Content Modeler plugin is headless-native, so its’ integration is tighter and more straightforward due to its focus on headless. ACM allows developers to easily create content models and have them automatically added to the WPGraphQL schema. Developers can then start querying for their data immediately.
Our recommendation: Atlas Content Modeler
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.
The FaustWP plugin ensures that your WordPress site runs smoothly as a headless CMS. This includes things like smart content redirects and enabling post previews. Check out this list of plugins that are built for headless.
Our recommendation: FaustWP and whatever else you need!
Our recommendation: Atlas
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!