Decoupled CMS architecture (aka “headless”) is rising in popularity. This model allows cutting-edge user experiences, gives developers greater flexibility to innovate, and helps site owners future-proof their builds by allowing them to refresh the design without re-implementing the whole CMS. With all this upside, it’s no wonder this type of build has gained serious traction in both the Drupal and WordPress communities as of late.
Drupal and WordPress are both traditionally “monolithic” CMSs, with presentation baked in via the theme. However, due to the need for more flexibility and freedom, many developers have begun decoupling the CMS, using it for content management, editorial, and administrative tools, while implementing a separate frontend component dedicated to the user experience which communicates with the CMS via a web API.
There are a few key differentiators in decoupled architecture that make it so compelling for the right projects.
Presentation can be handled in a variety of ways, from interactive JS frameworks like React, to static site generators like Gatsby or Jeckyll, to mobile apps, or even another instance of a CMS. Multiple frontends can peacefully coexist.
Content Via Web Service API
The content for the site is accessible via a web-service API, usually in a mashup-friendly format such as JSON and provided via REST or a GraphQL interface.
CMS Backend and Database
There is a traditional database-driven CMS which editors use to maintain the content for the site via the same admin interface as always.
Why Does Decoupled CMS Matter?
Headless website development has the potential to unleash the creative power of frontend developers to deliver richer, faster, and more responsive user experiences. By shifting responsibility for the user experience to a separate application, the headless model provides a number of benefits:
Future-proofs your website implementation, letting you redesign the site without re-implementing the CMS itself.
Sets frontend developers free from the conventions and structures of the backend. Headless development not only eliminates “div-itis”, but it also gives frontend specialists full control over the user experience using their native tools.
Speeds up the site by shifting display logic to the client-side and streamlining the backend. An application focused on delivering content can be much more responsive than one that assembles completely formatted responses based on complex rules.
Builds true interactive experiences for users by turning your website to a functional in-browser application. The backend becomes the system of record and “state machine”, but back-and-forth interaction happens real-time in the browser.
In the most advanced cases, your website can be packaged and bundled as a Progressive Web Application (PWA), which can run as a mobile app right from a user’s home screen.
What Can You Do With a Decoupled CMS?
Static: The user-facing website is built via a static site generator that pulls from the CMS, allowing clean, elegant markup. Little to no end-user interactivity, but great for beautiful and scalable sites.
Dynamic: A portion of the website is highly interactive and communicates with the CMS via API. This is great for advanced editorial tools, calculators, or dashboards.
Native App: The frontend is a native mobile app. Users may or may not also interact directly with the website, but the CMS is used by admins.