How headless works

The three layers of a headless architecture

Headless architecture relies on a separation into three distinct layers, each playing a precise role in processing and displaying content.

The WordPress backend:

• Handles the creation, editing and organization of content
• Stores data in a MySQL database (posts, pages, taxonomies, media)
• Operates autonomously, independently of any frontend
• Keeps the familiar WordPress administration interface

The frontend (Next.js, React, etc.):

• Sends requests to the API to retrieve data
• Generates the HTML/CSS rendered to the visitor
• Can be modified, replaced or updated without affecting the backend
• Optimized for performance (SSG, SSR, ISR) and user experience

The API (REST or GraphQL):

• Acts as the interface layer between backend and frontend
• Receives requests from the frontend and returns data in JSON format
• Handles authentication and access control to data
• Enables multiple frontends to consume the same data simultaneously

What changes compared with before?

Monolithic architecture (traditional WordPress):

HTTP request → PHP server (WordPress + theme) → HTML response sent to the browser

• The PHP theme and the CMS are coupled in the same process
• A single output channel is possible
• Any design change can affect how the CMS works

Headless architecture:

HTTP request → Frontend (Next.js) → API (REST/GraphQL) → WordPress (data) → JSON response → HTML rendering

• Backend and frontend are distinct applications
• Multiple frontends can consume the same API
• Each layer can be deployed, updated and scaled independently

The concrete benefits of this separation

1. Optimized performance

• The frontend can pre-generate pages at build time (Static Site Generation) and distribute them via a global CDN
• Visitors receive static HTML, without waiting for PHP processing
• Incremental Static Regeneration (ISR) techniques allow updating pages without a full rebuild

2. Frontend technology independence

• The choice of frontend framework (Next.js, Nuxt, Gatsby, Astro) is free
• Design is not constrained by any theming system
• Interfaces can be tailored for each use case

3. Multi-channel distribution

• A single WordPress backend powers multiple applications (website, mobile app, interactive kiosk, digital signage)
• Content is centralized and consistent across all channels
• Adding a new channel requires no changes to the backend

A concrete example: multi-channel distribution

With a monolithic architecture, each channel needs its own content management system:

• 4 distinct systems to maintain
• Duplicated content with the risk of inconsistency
• Each update must be reproduced on every platform

With a headless architecture:

• 1 single WordPress backend centralizes all content
• 4 independent frontends consume the same API
• An update in WordPress is instantly available across all channels

What does NOT change

For editors:

• The WordPress admin interface remains the same
• Content creation uses the same tools (Gutenberg, ACF, CPT)
• No additional technical skills are required

For SEO:

• Content remains indexable by search engines thanks to SSR or SSG
• URL structures can be preserved during migration
• SEO optimizations (meta tags, sitemap, structured data) are still possible and often better controlled

For security:

• WordPress can sit behind a private network, not publicly accessible
• Updates and backups follow the same procedures
• The attack surface is reduced because the CMS is no longer exposed directly to visitors