What do you do if you want more control over the front-end but still benefit from the content management capabilities of WordPress? This is where the “headless” approach comes in.
WordPress is a full-featured content management system that enables the creation of standalone websites. That is, a website built on a single codebase with tight integration between all parts of the system (front-end and back-end). Because of this, WordPress can offer rapid development through the use of plugins which can affect both the administration side of the website and the presentation side. The caveat to this is that to gain these benefits, you must write a theme that adheres to the WordPress specification.
What is headless?
Headless refers to the separation of the backend (content storage) from the front-end (dealing with the presentation). A headless CMS allows you to create, edit, and store content but has no way to display that content on its own. The headless CMS will also have an API (Application Programming Interface) that defines how other systems are able to communicate with it in order to access the content.
How does this work with WordPress?
WordPress does not have a headless mode per se but this can be achieved by hosting WordPress on a domain (or subdomain such as cms.yourwebsite.com), creating a blank theme, and redirecting traffic from the WordPress site to somewhere else (for example, the frontend domain).
In doing this you will have the ability to use the WordPress CMS to create content but it will not be visible anywhere.
So how do you create the front-end?
There are numerous frontend frameworks available today, written in any number of languages. You could even write the whole website front-end from scratch without a framework (using pure HTML, CSS & JavaScript). However, for its speed, ease of use, and strong development community, our preference is to use NextJS. NextJS is a ReactJS-based front-end framework with lots of modern features like routing, server-side rendering, and static generation. All of these aid in building a website quickly with a focus on performance.
WordPress provides, what is known as, a REST API out-of-the-box which it is perfectly possible to use to fetch posts, pages, tags etc from the WordPress CMS. To gain a bit more control, we can use GraphQL which is a query language for APIs and allows us to dictate what data to return in our API request. This results in faster responses and better privacy (due to unnecessary data being excluded).
What are the benefits of a headless approach?
- Portability: The separation of the front end and the back end makes it easier to change either component. For example, moving to a new CMS without changing the front end is perfectly possible with just some work to rewrite the API calls.
- Speed: The resources required to host a NextJS-powered frontend can be less than a traditional CMS-powered website. In conjunction with some clever technology, such as server-side rendering and static exports, this enables the front-end to render very quickly. Additionally, visits to the CMS will have no impact on the front-end performance and vice versa as they are ideally hosted separately.
- Easier to redesign: Owing to the separation of the front end and back end, it is easier to redesign the front end as you only have to worry about the data you receive through the API rather than the whole back end.
- Cleaner code: This is somewhat a personal opinion but the headless approach lends itself to writing more compartmentalised code. This can mean fewer bugs, easier to create automated tests and a faster development process.
What are the downsides of a headless approach?
- WordPress plugins: WordPress plugins offer a wealth of functionality at a low cost. They achieve this by adding elements to both the backend and, often, the front-end through the use of hooks. By separating the front-end, you no longer receive the front-end part of this functionality which means you are left to code this yourself on your custom front end. Depending on the plugin this could range from a small amount of work to lots of work. This approach therefore suits websites with a smaller number of carefully considered plugins.
- Cached content: If you wish to use some of the performance gains offered by static generation then you need to consider the approach to rebuilding the content and how frequently/when this happens. NextJS does offer mechanisms for re-validation of the cache which can assist in this but the strategy needs to be carefully thought through.
- Higher maintenance overhead: Maintenance is critical for modern websites. Programming languages, core code, plugins, libraries, and tooling all need to be kept up-to-date to ensure security and to maintain your upgrade path (reducing technical debt). With a headless CMS, this needs to be done in two places – the CMS and the front-end framework.
Conclusion
There are many approaches to building a modern website and we believe strongly in the capabilities offered by a well-configured WordPress CMS with a well-built integrated theme. For the majority of projects, this can take you a long way and offers compelling value. However, for some projects, or clients, the flexibility offered by the headless approach can produce a fast, scalable solution whilst still leveraging the power of a CMS such as WordPress.
