We’re going to take a closer look at what headless WordPress is, how to use a headless content management system, and why you’d want to. But first, let’s talk about how a traditional WordPress site works and how headless WordPress is different.
When you load a page on a WordPress site, the server runs code that builds an HTML document. That document is then sent to your browser. That’s why WordPress and web apps that work in the same way are called server-side apps.
WordPress’s head, its PHP-based front-end interface, is bypassed in a somewhat gruesome metaphor, leaving the body (the CMS itself) on the server, controlled remotely by an external app.
How Does A Headless CMS Work?
A client-side web app and a server-side content management system need a way to talk to each other. That’s the API’s role, which gives this approach to app development yet another name: API-driven development.
An API is an Application Programming Interface, a standardized way for two pieces of software to talk to each other. When an application needs to ask for information or tell other software what to do, it communicates via an API.
WordPress has a REST API, a type of web-based API that allows the software to talk to it over the internet using HTTP web addresses called endpoints. Endpoints look just like the web addresses we use every day to visit websites, and they accept various types of request: GET requests to retrieve information, POST requests to submit information, and so on.
For example, WordPress has a “posts” endpoint that looks like this:
When software sends a GET request to a WordPress site’s “posts” endpoint, it returns a list of posts and related information. If the request includes a post ID, it returns the contents of the specified post. We can also use this endpoint to tell the CMS to create a new blog by sending an HTTP POST request with information such as the title and body text.
The API allows any compatible software to communicate with WordPress, acting as the headless back-end of a combined client-server system. To complete the partnership, we also need a front-end, the client-side app that runs in the browser. These apps are often called Progressive Web Apps, or PWAs, and we’ll look at how they work in the next section.
What is a Progressive Web App?
Unlike server-side applications, PWAs can:
- Be installed on mobile device home screens thanks to Web App Manifests.
- Work when the user’s device is offline, so they can browse your site in the subway or on an airplane — a feature enabled by caching and service workers that control how the application interacts with the network.
- Smoothly load new content and modify the interface without reloading the whole page.
- Send push notifications to mobile and desktop devices.
A well-engineered PWA feels faster than a server-side app because, once its code downloads, it can preload data from the API and modify the page without making network requests that add latency to every interaction.
Why Use a PWA with Headless WordPress?
WordPress is an excellent CMS. It has stood the test of time, developing a devoted following and a unique ecosystem of plugins, making it one of the most flexible and feature-rich content management platforms ever created. But the traditional server-side model limits its potential.
- Themes have to be written in PHP using the framework built into WordPress.
- Every page load or interface change requires a network round-trip, adding latency and frustrating delays that degrade the user experience.
- WordPress can’t take advantage of the newer web and browser technologies to offer a native app experience.
WordPress’s developers added the REST API because they were aware of these limitations and wanted an option WordPress users could use to take full advantage of the modern web, without giving up WordPress’s robust content management and publishing features. For many businesses, a Progressive Web App is an excellent alternative to a native mobile app. PWAs are cheaper and easier to develop, and you only have to manage a single codebase for the web, iOS, and Android platforms. However, PWAs have some limitations compared to native apps: if you need to use on-device hardware such as sensors, native code is your only option.
How Do I Convert WordPress Into a PWA?
You have a WordPress site, you’re on-board with headless, and PWAs sound incredible. But you’re missing a crucial component: you need a Progressive Web App that speaks WordPress’s language. And there’s the catch: using a PWA with headless WordPress is more complicated than just installing a new theme. But once you have decided to take the plunge with a PWA, there are several ways to achieve your goal.
Install a PWA WordPress Plugin
PWA plugins convert your existing site into a progressive web app. They’re the most straightforward way to bring benefits such as offline functionality, home-screen installation, and fluid interfaces to your WordPress site. However, plugins provide less control and customization than the other options we’ll discuss.
Build a Progressive Web App
Web frameworks help developers to build responsive interfaces from reusable components. Both React and Vue offer tools so that developers can get up and running quickly, and, because they are enormously popular, you’ll have no trouble finding someone to build a PWA for your WordPress site.
Use A Site Generator
Gatsby is a site generator that can pull content from the WordPress REST API to populate a static React-based site.
Gatsby can generate PWAs, including Manifest files for home screen installation and Service Workers for offline functionality. It includes a WordPress source plugin that makes it easy to get data from WordPress and into your static PWA app.
Performance and Flexibility
Headless WordPress isn’t for everyone, and many users are happy with a traditional server-side WordPress site. For users who want to combine WordPress’s content management features with modern web technologies’ performance and flexibility, a headless WordPress site with a Progressive Web App is the best of both worlds.