Introduction

Implementing AEM with a hybrid approach offers benefits like agility, scalability, and flexibility.

Yet, it requires careful planning, design, and execution, considering technical and organizational factors to ensure robustness and scalability.

AEM solution approaches

AEM (Adobe Experience Manager) is a content management system (CMS) that allows organizations to manage their digital content across various channels. AEM offers three primary approaches to building web applications: fullstack, headless and hybrid.

A Full Stack AEM architecture is a unified system, often referred to as the Traditional CMS. 

This approach reduces the overall platform management costs significantly, as it consolidates all technology stacks into a single architecture. Additionally, it enables the utilization of Out-of-the-Box (OOTB) components, streamlining and expediting the development process.

Once an AEM project is created, the JS and CSS from the ui.frontend module are compressed and stored in the app/project-name/clientlibs directory.

Within the AEM component, Sightly (HTL - HTML Template Language) can be employed within HTML to dynamically render content from Sling models. All aspects of content creation, styling, delivery, and presentation are centralized within AEM, affording complete control over content editing.

However, it's important to note that content cannot be directly exposed and disseminated to multiple external channels outside of the system in this setup.

On the other hand, Headless architecture decouples the frontend and backend, with the term "Headless" indicating the absence of a specific presentation channel being tied to it.

It offers the potential for enhanced performance and facilitates multi-channel delivery. It has an API-driven model, where AEM content is transmitted in JSON format to various channels, enabling these channels to create tailored designs.

In the Headless Architecture, content fragments and content fragment models are accessed using the GraphQL API or Asset Rest API, reducing reliance on the backend. In this setup, content is provided as a service API, enabling interaction between the backend and any frontend, accessible via any device. It necessitates increased involvement from frontend developers.

In this framework, content creation occurs within AEM, while styling, presentation, and delivery occur on a separate platform. It represents a contemporary development approach for implementing experiences across websites.

A Hybrid CMS represents an ideal amalgamation of strengths. Within AEM, we can employ Hybrid Single Page Applications (SPAs) to seamlessly blend the characteristics of both Traditional and Headless architectures.

This approach combines the efficiency and user-friendliness of a traditional CMS with the adaptability and scalability inherent in a headless development framework.

Depending on specific business requirements, we can opt for either the traditional or headless approach. However, once a choice is made regarding the frontend, the hybrid solution may not offer the same degree of flexibility that a purely headless approach can provide.

With a hybrid CMS, we can either create our own templates or utilize pre-existing ones, enabling us to make content readily available and easily reusable across various channels and devices by utilizing APIs. Out-of-the-box components can streamline the delivery of content to the web.

Options for Hybrid solutions within the AEM ecosystem

AEM SPA

The SPA Editor, provided by AEM, offers a solution for integrating React and Angular applications directly with AEM for in-context editing. It is most effective when:

• You intend to develop your entire frontend for a site using React or Angular.
• You aim to minimize the familiarity required with AEM for your frontend developers.
• You require SPA-controlled routing and want to serve SPA web pages from AEM.

Content authoring for SPA components remains stored in the JCR but is presented as a JSON representation through component mapping instead of crafting AEM HTL templates. This JSON can then be exposed to other channels similarly to before.

An advantageous aspect of this approach is that Adobe has re-implemented many Core Components in React and Angular, facilitating direct parent/child SPA component relationships and familiar data flows for SPA developers.

However, this solution has some limitations within AEM due to SPA-controlled rendering instead of HTML templates. For an up-to-date list of limitations, please refer to the Adobe documentation.

Despite these limitations, the SPA Editor is actively maintained and developed by Adobe, raising hopes for the gradual removal of these constraints.

AEM Remote SPA

Remote SPA, another AEM-provided solution, enables externally hosted React applications to be editable within AEM. In function, it parallels the SPA Editor but with the SPA server delivering the pages instead of AEM. This allows the engineering team to predominantly construct site components outside of AEM and independently scale page traffic from AEM.

Drawbacks of this approach include the necessity for separate server infrastructure, distinct deployment cycles, the same limitations as SPA Editor, and it only supports React currently.

Nevertheless, this might represent the optimal choice for integrating authoring into an existing SPA application or meeting project deadlines for a team less familiar with AEM.

Final thoughts

In conclusion, an AEM hybrid approach using React combines the benefits of headless and headful approaches, providing organizations with the flexibility to use the latest front-end technologies while still leveraging AEM's powerful content management and personalization features and even when the trade off can look higher the benefits in the long term are bigger.

Need AEM support? DEPT® is a platinum Adobe solution partner.