Tech Mastery: Deep Dives into AEM, Cloud Technologies, AI Innovations, and Advanced Marketing Strate: Sling Dynamic Include — Deep Dive | Dynamically Include Page Components in AEM

This tutorial deep dive into Apache Sling Dynamic Include and explains how to use different include types in AEM to dynamically include the page components in AEM.

SDI(Sling Dynamic Include) Introduction

Most of the cases AEM sites contain static data that can be cached in Dispatcher, CDN, or other caching layers.
In some cases, small dynamic data makes the entire page not cacheable in Dispatcher or other caching layers, this will increase the overall page loading time and also impact the performance of the publishers as every request reaches to the publisher for rendering.
In the above cases, we want to cache almost the whole page in dispatcher and the selected component should be included dynamically.
The SDI enables the page to be cached with some placeholder(include) for dynamic data that will be replaced with real content while accessing the page. This enables most parts of the pages to be cached in caching layers and the dynamic data is replaced while accessing the page.

SDI Include Types

Include tags helps to add dynamic data before returning the page to the client, Include tag types available on different layers between the dispatcher and client.
SSI(Server Side Include) — Apache(Webserver)/Dispatcher layer process includes and replaces the includes with real content.
ESI(Edge Site Include) — CDN layer process includes and replaces the includes with real content.
Javascript Include — The browser process includes and replaces the includes with real content through AJAX call. Javascript Include may impact the page load time as the separate Ajax call is initiated to replace the placeholder with real content also this will create the problem with browser that won't support the JavaScript.

SSI Flow — Apache and Dispatcher Module

This is the SSI include flow through Apache Webserver and Dispatcher Module, the Apache layer process includes and replaces with the real content before sending the response to the client. While the user requests the SDI enabled content, Dispatcher requests the content from the AEM server and cache the content response with the include enabled, on every request Apache/Dispatcher Module process and replace the include place holder with real content before sending the response to the client. The same flow is followed for other include type ESI and JSI, the include tags are processed and replaced with real content in different layers.

Configure SDI

As a first step install the “Sling Dynamic Include” bundle, the bundle can be downloaded from https://sling.apache.org/downloads.cgi

Install the bundle to AEM and ensure the bundle is in Active state.

I have enabled a dynamic component with the name “dynamicdata” that will display the current user logged into the system

dynamicdata.html

<h1>${currentSession.userID}</h1>

Let us now enable the required configurations in Apache/Dispatcher

As a first step load the mod_include.so module through httpd.conf or the configuration file that loads the modules.

LoadModule include_module modules/mod_include.so

Configure the virtual-host to process the includes

<VirtualHost *:8080>
    ServerAdmin [email protected]
    DocumentRoot "C:\opt\communique\dispatcher\cache"
    ServerName demo.albinsblog.com
 ServerAlias cdn.albinsblog.com
 
    RewriteEngine On 
    #RewriteRule ^/$ /en.html [R=301] 
    #RewriteRule ^/content/wknd/ca/(.*)$ /$1 [NE,L,R=301]
 
   <Directory /> 
     <IfModule disp_apache2.c>    
       SetHandler dispatcher-handler
    </IfModule>
    Options Indexes FollowSymLinks Includes     
    # Set includes to process .html files
    AddOutputFilter INCLUDES .html
    AddOutputFilterByType INCLUDES text/html
    AllowOverride None
   </Directory>
</VirtualHost>

Now disable the cache for “nocache” selector in dispatcher farm files under the cache rules section

/rules
        {
        /0000
          {
            /glob "*"
            /type "allow"
          }
       /0001
          {
         
          /glob "/libs/cq/security/userinfo.*"
          /type "deny"
          }       
    
      /0004
          {
            /glob "*.nocache.html*"
            /type "deny"
          }    
       
        }

SSI Include

Let us now enable the SDI configuration for SSI include, in this scenario Apache/Dispatcher replaces the include place holder with real content.

enabled – set it to true to enable SDI
path – SDI configuration will be enabled only for this path
resource-types – which components should be replaced with tags
include-type – type of include tag (Apache SSI, ESI or Javascript)
Filter selector – selector added to HTTP request for particular component and is used to get actual content.

Now access the page enabled with “dynamicdata” component — this will display the logged in user name

If you see the page source, the dynamic data is already replaced by Apache/Dispatcher before sending the response to the client.

Let us review the cached content in Apache/Dispatcher — the content is enabled with include placeholder and replaced with real content on every request.