In order to understand what a “headless WordPress” website architecture is, it’s important to first understand what a traditional WordPress architecture looks like. Let’s compare each of these approaches.
Traditional WordPress
Traditionally, a content management system (CMS), such as WordPress, would handle both the frontend and backend of a website.
Users typically interact with a traditional WordPress site like this:
- Publisher: Creates and manages content such as blog posts and pages inside of WordPress.
- Developer: Writes code to control how the site looks and functions using PHP and WordPress’ Theme API.
- Website Visitor: WordPress generates the HTML page that is sent to the website visitor.
In this “coupled” CMS architecture, WordPress provides the content management capabilities to publishers, and it is also responsible for serving HTML pages to website visitors.
Headless WordPress
A headless CMS uses a “decoupled” architecture, where the frontend and backend are managed separately. Publishers still manage content in WordPress, but WordPress is no longer responsible for generating HTML pages. Instead, a separate JavaScript-based frontend application is responsible for generating and serving the HTML pages that are served to website visitors. The frontend JS app typically uses WPGraphQL or the REST API to “pull” data out of WordPress and use it to render the pages of the website.
Users typically interact with a headless WordPress site like this:
- Publisher: Creates and manages content such as blog posts and pages inside of WordPress (the same as in a traditional WP architecture).
- Developer: Writes code to control how the site looks and functions using JavaScript. A framework such as Next.js (+ Faust.js), Nuxt or SvelteKit is often used to power this frontend application.
- Website Visitor: The frontend JavaScript app generates the HTML page that is sent to the website visitor.
A headless WordPress architecture allows publishers to continue to benefit from the great publishing experience that WordPress provides. At the same time, it also also allows developers and website visitors to take advantage of technical capabilities that modern JavaScript applications bring to the table.
What’s Next?
Hopefully this post has given you a good sense of what headless WordPress is and how it differs from a traditional WordPress architecture.
At this point, you may be thinking “Okay, but when should I use WordPress as a headless CMS?” Stay tuned for a blog post on that very topic, coming soon!
