Headful and Headless in AEM headful-headless

Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. AEM offers the flexibility to exploit the advantages of both models in one project. This document provides an overview of the different models and describes the levels of SPA integration.

Overview overview

AEM offers powerful tools to manage both the creation of content and its delivery in one platform. This is a traditional “headful” model of content management, where the content authors and developers work on the same platform to deliver the experiences to the content consumers.

AEM can also be used to simply manage content, allowing presentation and delivery of the content to be managed by another platform. This is the “headless” model of content management, where the content authors and developers work on different platforms to deliver experience to the content consumers.

But this does not need to be a binary choice. AEM offers unprecedented flexibility, allowing you to exploit the advantages of both models for your project.

In a headful or full-stack model, the content is managed in the AEM repository and AEM components based on Java, HTL, and so on, are used to render the content for the user experience. In this model, creating the content, styling it, presenting it, and delivering it all happen in AEM.

In a headless model, the content is managed in the AEM repository, but delivered via APIs such as REST and GraphQL to another system to render the content for the user experience. In this model, content is created in AEM, but styling it, presenting it, and delivering it all happen on another platform.

Single Page Applications (SPAs) are often the destination for content delivered headlessly by AEM. However, these SPAs do not need to be entirely external to AEM. AEM lets you decide to what degree your SPAs are integrated into AEM. Let’s take an example.

Web Shop Example web-shop-example

Let’s say that you have an existing web shop for your company as an SPA. In it you have all your product details and images. Then you introduce AEM to power your marketing efforts such as promotional sites, blogs, and campaign content. How do you integrate the two? AEM enables a spectrum of options:

The next section explores these levels of integration in more detail.

SPA Integration Levels integration-levels

SPA integration falls on a spectrum of four levels in AEM.

Level 1 is an example of a typical headless implementation. However content authors can only view their content in-context within the SPA. AEM is only an authoring tool.

The advantage and flexibility of AEM becomes apparent with levels 2 and 3 while still retaining the advantages of SPAs. Content authors can create their content in AEM, but also see it in-context within AEM. The SPA gains the ability to be authored in AEM, but still be delivered as an SPA.

Implementing the Integration Levels implementing

There are different tools in AEM available depending on what integration level you choose. Each level builds on the tools used in the previous. The following list links to the relevant resources.