'Headless' and 'decoupled' are among the most overloaded terms in the Drupal community. They're used interchangeably to describe architectures ranging from a fully decoupled Next.js frontend consuming a Drupal JSON:API to a progressively decoupled single component in an otherwise traditional Drupal site.
The terminology confusion matters because teams sometimes adopt headless architecture because it sounds modern, rather than because it solves a real problem they have. This post gives you an honest framework for the decision.
What headless actually means (and why the term is overloaded)
In a traditional Drupal site, Drupal handles both content management (the back end) and page rendering (the front end). The theme layer in Drupal generates the HTML that browsers receive.
In a headless architecture, Drupal manages content but doesn't render pages. Instead, it exposes content via an API — JSON:API or GraphQL — and a separate frontend application (typically React, Next.js, or Vue.js) fetches that content and renders pages.
The three patterns you'll encounter:
- Fully decoupled — Drupal is a pure content API. The frontend is a completely separate application. Drupal never renders HTML for public consumption.
- Progressively decoupled — Most of the site is traditional Drupal, but specific interactive components (a search interface, a complex form, a real-time feature) are built as JavaScript applications embedded in Drupal pages.
- Hybrid/multi-channel — Drupal serves content to multiple frontends simultaneously: a website, a mobile app, a digital signage system, all consuming the same content API.
When headless Drupal makes sense
Headless architecture solves specific problems. It's the right choice when:
- Multi-channel delivery is required — your content needs to appear on a website, a mobile app, and possibly other surfaces simultaneously. A content API serves all channels from a single source of truth.
- Frontend performance is critical — a Next.js frontend with static generation can serve pages significantly faster than server-rendered Drupal, with better Core Web Vitals scores.
- Frontend team autonomy matters — if your frontend developers want to work in React without touching PHP or Twig, headless gives them that separation.
- Custom interactive experiences — rich, highly interactive interfaces are easier to build in React than in Drupal's theme layer.
When headless is the wrong call
Headless is frequently adopted in situations where it creates more problems than it solves:
- Simple content sites — if your site is primarily content pages with standard editorial workflows, traditional Drupal renders faster to build and easier to maintain.
- Small teams — headless requires expertise in both Drupal and a JavaScript framework. Two separate systems to maintain, debug, and deploy.
- Complex editorial workflows — Drupal's in-context editing, Layout Builder, and editorial preview tools work in the traditional architecture. In a fully decoupled setup, editors lose much of this. Building equivalent tooling in a headless setup is non-trivial.
- Limited DevOps capacity — headless deployments involve two separate deployment pipelines, two hosting environments, and CDN configuration that doesn't exist in traditional Drupal.
- Budget-constrained projects — headless builds consistently cost 30–50% more than traditional Drupal builds for equivalent content complexity.
the editorial experience problem
This is the most underestimated issue with headless Drupal. Editors accustomed to seeing their content in-context as they edit will find the decoupled experience significantly worse. If content editors are stakeholders in the decision, involve them early and be honest about the tradeoffs.
Drupal's headless toolkit
Drupal 10's headless capabilities are genuinely mature:
- JSON:API — in Drupal core since 8.7. Provides a standards-compliant API for all Drupal entities with filtering, sorting, pagination, and relationship traversal.
- GraphQL — via the GraphQL 4.x contributed module. Better for complex queries and clients that need to specify exactly the fields they want.
- Decoupled Router — resolves Drupal paths to entities, enabling frontend applications to handle Drupal's URL aliasing.
- Next.js for Drupal — the Chapter Three package provides a solid integration foundation for Next.js frontends consuming Drupal content.
- Preview mode — Drupal's draft content can be previewed in a decoupled frontend using Next.js preview mode.
Real costs of going headless
Before committing, make sure your budget and timeline account for:
- Two separate hosting environments with separate scaling and monitoring
- CDN configuration for the frontend application (not just Drupal's assets)
- Build time for the frontend application on every content change if using static generation
- Editorial tooling — preview, in-context editing, content entry UX — that needs to be rebuilt or approximated
- Two CI/CD pipelines instead of one
{ our recommendation }
For most enterprise Drupal projects in 2025, traditional Drupal with a well-optimized theme is still the pragmatic choice. Go headless when you have clear multi-channel requirements, a strong JavaScript frontend team, and budget for the additional complexity. Don't go headless because it's what everyone is talking about.