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.
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 need not 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, etc. 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 need not be entirely external to AEM. AEM allows you to decide to what degree your SPAs are integrated into AEM. Let’s take an 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 in order 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.
Of course you could also re-implement the web shop SPA as a fully-functioning AEM SPA using the AEM SPA Editor framework. If you already have AEM and wish to create a new web shop or other SPA, this is the recommended method, but it out of the scope of this document.
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.
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.