Headless content management in AEM


    Adobe Experience Manager, commonly referred to as AEM, is a cloud-native, API-first content management system (CMS) and Digital Asset Management (DAM) platform that enables you to structure and deliver headless content across multiple channels. AEM enables headless delivery of immersive and optimized media to customers that can automatically adapt to any platform or device.

      This headless CMS will help you create immersive content that allows marketing teams to manage channel-agnostic content using an enterprise-level DAM. It supports a content as a service model that doesn’t need you to recreate your content for different channels. Moreover, businesses seeking content delivered as packed HTML (HTML/CSS/JS) can acquire the same with AEM.

      Taking the above into consideration, in this article, we’ll be shedding some light on everything you need to know about AEM and its unique headless content management feature.

Headless CMS Vs. Traditional CMS

     To understand what headless CMS is, we need to understand what a traditional CMS is first. Traditional CMS uses more of a ‘server side’ approach to deliver content and involves managing content by placing everything (content, images, HTML, CSS) in the same bucket. Doing so takes away the ability to reuse content as it was blended with the code.

     HTML is rendered on the servers, and users can generate content with WYSIWYG editors using predefined templates. Headless CMS, on the other hand, works a bit differently. It’s a backend CMS that decouples the content repository “body” from the presentation layer “head”.

      The content present in a headless content management system is delivered seamlessly via APIs (Application Programming Interface) to multiple channels or devices. Finally, the presentation of content on each platform or channel is then done independently. But since the content is not linked to a predefined template, the author cannot preview the content.

      Adobe Experience Manager is a hybrid CMS that supports both headless and traditional delivery models. You can create and distribute content in the classic way or distribute via an API. This content, as a service model, is the best of both worlds, coupled with seamless multi-channel delivery and a simplified administration.

Adobe Experience Manager’s headless mode for SPAs

      Single page application refers to a webpage that interacts with the user by dynamically rewriting the current page with new data from the server, instead of loading an entirely new page. AEM supports the SPA paradigm with SPA editor since version 6.4. With AEM’s hybrid CMS approach, you can enable dynamic page creation, layouts and components in SPA with a visual content editor.

      Let us now look at various facets of how Adobe Experience Manager implements the headless CMS approach.


SPAs are vital for rendering HTML in the backend

    Traditionally, the HTML of a webpage is rendered by the backend server and loads again every time the user navigates to another page. But now that websites are much more complex and behave like full-fledged applications, SPA is a necessity.

    SPA first loads an empty HTML and JavaScript/CSS, and then the JavaScript dynamically assembles the webpage. Any additional content is requested from backend APIs.

The single page application WYSIWYG content editor

     The AEM WYSIWYG editor was extended to support SPAs. You can see the content created directly in the app, and an author comfortable with AEM can create content without learning a new tool. You can also reuse other assets or content from the traditional webpage.

Content Application Programming Interface

     AEM works on the RESTful sling network. The visualization layer is already wholly decoupled from the data through the Java Content Repository. This allows you to change the extension from .html to .json, and AEM will return all the content for the request page.

     But due to issues like unstructured data format, instability post changes, etc., an additional layer called Sling Exporter Framework was introduced. This maps your data to exposed data in APIs and defines how existing sling models should be transformed to formats like JSON or XML.

The perks of using AEM for SPAs

 Here are a few benefits of developing SPA with AEM:


      Supports creating SPA project template with AEM base setup, core components, etc.

      Has a front end build chain that directly deploys all assets into AEM.

      Front-end developers get total power over the front end without knowing a lot about or installing AEM.

      You can run a whole integration test suite in the frontend without having to move large amounts of data to a different stage.


Server-Side Rendering (SSR)

     The single page application approach faces massive concerns with the initial page loading screen. SSR solves the problem of slow initial page loading times by executing JavaScript in the backend in a headless browser or NodeJS server and returning the populated initial HTML to the client. This way, the browser directly renders the HTML and users get immediate feedback.

Leveraging Headless AEM for clients who aren’t web-based

     The content as a service model enables many use cases like Android or iOS Apps, Social Media Snippets, digital signage systems to small IOT devices. Therefore, loosely structured web content will cause issues. To overcome this issue, AEM was recently extended to allow consuming content fragments with GraphQL.

        In simple words, GraphQL is a query used for an API instead of a database. It will enable clients to query the API according to their own needs. The API won’t have to provide different endpoints returning different amounts of data for different clients.

When should businesses implement Headless AEM?


A headless CMS can be implemented if the following points are met: 

      You want to deliver the same user experience and code for a content-focused webpage and hybrid mobile app.

      When you experience a shortage of AEM developers but have a mighty frontend development team.

      You want to deliver un content from AEM to platforms that are headless (not web technology-based).

These are only some use-cases of a headless CMS.

Bottom Line

       Adobe Experience Manager  is the future of content management systems as it allows you to reuse content across all platforms seamlessly. Furthermore, its integration into Adobe Experience Cloud enables you to reuse the content in emails, personalization and many more tools and technologies.





Popular posts from this blog

AEM as a Cloud Service - Benefits and Limitations

AEM as Cloud Service Project Structure - 1