Headful, headless, or hybrid AEM: How to choose the right CMS approach

Even as business models evolve, customer experience has remained the center point of all Enterprise Digital Strategies. In a rapidly evolving business landscape, marketers are reimagining the digital experience for their customers to make them feel more connected with their brands. This impacts all critical decisions, such as finalizing the tech stack, architecture, and Content Management System (CMS).

Our earlier article elaborated on the headless and headful CMS approach. In this follow-up, we will focus on the features and evaluation parameters of the three broad architecture paradigms in Adobe Experience Manager.

Headful AEM

It's unknown whether the term 'headful' existed in the CMS world from the beginning or it was coined as a diagonally opposite term of Headless (the same goes for Hybrid). If you are on the fence about adopting the Headful approach in AEM, the following evaluation parameters can help you make a decision.

The headful approach in AEM has the following features and functionalities:    

Core/ advanced authoring capability: When you opt for the headful option in AEM, you get CMS's core authoring capabilities. It controls the templating and presentation logic and outputs fully formatted HTML. Starting from templates/component/dialog, AEM also allows creating and editing experience fragment/ content fragments to control a fragment/section of content. It enables you to change the theme/design with a site-level style system.

Preview/ drag and drop/ WYSIWYG: You get WYSIWYG (what you see is what you get)/in-place editing/ drag and drop features, empowering you to update the presentation and layout with an in-context preview. It also offers an instant and final page view while editing it.

Workflow management: The other core capability the headful CMS approach offers is Workflow, which plays an important role in the CMS world. AEM workflows are powerful in automating various steps involved in business use cases. It caters to the approval mechanism performed on pages/ assets and other resources created by content authors/ reviewers/ approvers. It also enables marketers to customize default workflow-related interfaces per business needs.

Development Life cycle and cost: In headful, the development and assembly of templates/ components/ client-side libraries are all in one place. It speeds up the overall development life cycle and reduces the total cost of ownership with a single architecture stack, efficient maintenance, and training systems.

User governance: AEM has strong user governance/ access and permission functionality that helps define roles and permission in content creation. It is a must-have requirement if you work with multiple brands across multiple locations, requiring different people and permissions through different levels.

Simpler infrastructure setup: You don’t need a complex setup while using AEM. You can set up a headful CMS in AEM quickly and easily with a few clicks using the cloud manager. All you need to do is to install and set up several components for on-premises setup, including AEM Author/Publish, Dispatcher, and CDN.

Server-side rendering/ SEO: In typical HTL (HTML Templating Language introduced by Adobe), a head-on implementation approach, the complete HTML markup (to be rendered on the browser) is generated on the server side. The HTML Templating Language (HTL) with a server-side rendering approach is beneficial for search engine optimization (SEO) as it allows for component-level optimization. In Simpler terms, server-side rendering helps generate HTML code on the server side. It can cache it for faster delivery, which is useful for optimizing web pages for search engines.

Multicounty/ Multilingual support: AEM strongly supports multicounty/ multilingual rollout in the headful implementation approach. It has built-in features such as live-copy/ translated copy/rollout/ inheritance that are sufficient to meet multicounty/ multilingual requirements.

Headless AEM

In headless CMS, the presentation is separate and sits outside the AEM. In delivering personalized, omnichannel Digital Customer Experience unrestrained by the underlying platform, this paradigm has gained popularity over traditional approaches in recent years.

AEM is built on the RESTful Sling framework, which separates the visual and data layers using the Java Content Repository. This makes AEM a headless CMS, meaning it can return raw content in different formats like .json instead of .html. Although there are some issues with the headless approach, AEM has solved them by introducing Content Fragments and a GraphQL-based implementation approach.

The headless approach in AEM has the following features and functionalities:  

Omnichannel delivery: Headless is preferred when the content is consumed through multiple channels. Here, the AEM will act as a mere repository, exposing content as a service in REST/ GraphQL endpoints. This CMS approach helps you scale efficiently to multiple channels.

Frond-end flexibility: As the front-end development is completely decoupled from the backend, the headless approach in AEM provides front-end flexibility by allowing you to use any front-end technology or framework to build the user interface. It gives you complete control over the look and feel of the website or application without being restricted by the capabilities or limitations of the CMS. It allows you to access and deliver content across multiple channels and devices, providing greater flexibility and scalability for front-end development.

Development Life cycle: The overall development life cycle gets extended as separate teams work on different environments and codes are deployed accordingly. One way to get around this problem is for the individual teams to work in parallel once the stakeholders have agreed on the contracts.

Infrastructure setup: Multiple platforms/architecture require complex infrastructure setup, and managing this setup can be challenging. To address this challenge, you must reduce the number of integration points/ layers, implement a cache-heavy architecture, and have a smaller, well-connected team manage the infra/DevOps.  

Server-side rendering (SSR)/ SEO: As a front-end framework controls the presentation layer, the execution of scripts happens on the client side, and markup and rendition are generated on the browser. This hampers SEO as the search engine doesn't crawl the actual content. Is there a way we can achieve SSR in Headless? Adobe's recommended solution is to use Adobe I/O Runtime. Another workaround is to use nextjs/ vercel setup, which helps convert a CSR to SSR. 

User governance/ Workflow/ MSM: Since the data is created in AEM and exposed to the other platform for assembling and creating the final content, user governance, and Workflow & the MSM can be applied only to the content data created in AEM in the following ways:

• Pages (content pages or experience fragments) - You can control who accesses and edits the data, set up a process for approving changes to the data, and copy the data to different sites or languages.
• Content Fragment - You can control who accesses and edits the data and set up a process for approving changes to the data. But you cannot copy the data to different sites or languages.

Hybrid AEM

The Hybrid approach to CMS in AEM brings you the best of both worlds. AEM helps manage and distribute content to different channels and delivers content in two ways: as fully formatted HTML and JSON over HTTP APIs. With the hybrid approach, we need to create content only once, which can be used across multiple channels. Different options, such as experience fragments, content fragments, or Single Page Application (SPA) editors, are used to implement a hybrid approach.

The Hybrid approach in AEM has the following features and functionalities:  

Experience fragments (XF) let you manage experiences from a central location. With context-aware variations, XF can be easily designed to optimize display for different channels, such as a web page, social feed, mobile app, or IoT device.

Content fragments (CF) are design- and presentation-agnostic content. You can create one or more variants from a single CF that adhere to the model and use the variants for different channels.

A SPA editor in CMS refers to a content management system that utilizes a single-page application (SPA) as its editing interface. It lets marketers change content on the authoring instance and preview them immediately on the website. This is possible via SDKs available for Angular and React front end that integrate authoring and publishing instances.

The hybrid approach in the AEM gives you the flexibility to manage and deliver content in multiple ways. It facilitates better content reuse across different channels that help with time and resource management. Content authors can create and manage content once and deliver it to various channels as per their needs. A hybrid approach also enables you to deliver content faster and more efficiently. However, a hybrid approach also adds complexity to content management. Developers need to have knowledge of both headless and traditional CMS concepts and might require additional training.

AEM is a powerful CMS tool that adapts well to changing business and technology requirements. However, evaluating all the parameters before finalizing the CMS approach is essential so that you don’t have to compromise on any requirement or use case.  A technology partner can help you understand the pros and cons of each CMS approach while helping you with customization, implementation, support, and strategic planning. By partnering with a technology expert, organizations can focus on their core business activities and leave the technical aspects of CMS management to the experts.