Unleashing the Power of Sling Dynamic Includes: A Deep Dive into Dynamic Content Rendering in AEM

While working for a client recently, requested to find solution on content cache and experience fragment cache. We have a header component which is configured inside an experience fragment and then the experience fragment is configured on header section. And same goes for the footer section as well.

The main problem was the cache. The experience fragment was also getting cached with the page itself. So if new page is published/unpublished which has impact on header was not taking effect on the site. So we had three problems

1. The experience fragment was getting cached with page.
2. Page publish/unpublish was not taking effect on pages because its already cached.
3. We don’t want to clear full cache. The site has a very large volume of traffic

Our goal was to achieve the following

1. We wanted to cache the experience fragment commonly. i.e: Experience fragment xyz will be cached once in one place and then it will be severed by the Sling Dynamic Include wherever its used.
2. Clear the cache of page and experience fragment on publish which is default behavior.

So what we did?

We included Sling Dynamic Include and I will describe how we added it.

First we need to Download and install the Sling Dynamic Include bundle.

The Jar Bundle Link is added here. The go to the felix console of your publish instance. http://localhost:4503/system/console and click the install/update button on the right top. Browse the jar file you downloaded and click install. Don’t forget to check the Start Bundle and Refresh Packages checkbox. For reference please check the screenshot

After the installation check if the bundle is active or not

Then go to http://localhost:4503/system/console/configmgr and search for Apache Sling Dynamic Include Configuration and configure it like following screenshot. Or you can provide the osgi configuration from application code. There can be multiple configuration for different purposes. I have created configuration org.apache.sling.dynamicinclude.Configuration~example-xf.cfg.json

{
  "include-filter.config.enabled":true,
  "include-filter.config.path":"/content/experience-fragments",
  "include-filter.config.resource-types":[
    "example/base/components/sdicontainer/v1/sdicontainer"
  ],
  "include-filter.config.include-type":"SSI",
  "include-filter.config.add_comment":true,
  "include-filter.config.selector":"xf",
  "include-filter.config.required_header":"Server-Agent=Communique-Dispatcher",
  "include-filter.config.appendSuffix": true
}

Here example/base/components/sdicontainer/v1/sdicontainer is the component for which we want to cache separately if its loading anything from /content/experience-fragments. We can also deny the cache so that it is always loading the updated things. Our plan is we will create only one cache file for each experience fragments on a separate path. Now change your experience fragments template structure to following.

Now create an experience fragment page with the new modified structure and place it on a page with the experience fragment component. Everything from code level is done. But we still need to do some dispatcher changes.

Update Apache HTTPD Web server’s httpd.conf file to enable the Include module and load following module

LoadModule include_module libexec/apache2/mod_include.so

Now update the publish vhost file of your site

    <Directory "${PUBLISH_DOCROOT}">

    #sling dynamic include
    Options FollowSymLinks Includes
    ModMimeUsePathInfo On
    AddOutputFilter INCLUDES .html

Also update the filter on your domains farm

/filter {
        $include "../filters/filters.any"
        # allow expericene fragment      
        /0001 { /type "allow" /extension "html" /selectors "xf" /path "/content/experience-fragments/*" }
    }

Now add the following rule to cache > rules section

You can also deny the selector and extension if needed. In this case this will not cache and everytime it will be rendered in aem not from dispatcher cache. That means user will always have the updated component data. This can be any component you can add on the json config I have added earlier.

/rules {
      $include "../cache/ams_publish_cache.any"
      ...
      ...
      /00025 {
          /glob "*.xf.html*"
          /type "allow"
      }
  }

Now everything is done. Create experience fragment with the template we updated and configure it. Add more experience fragments as you needed. Use it on different pages. Now experience fragment will be cached on /content/experience-fragments/

If the specific experience fragment is updated + published the cache will be cleaned automatically and all the pages using the same experience fragment will updated accordingly