Pages

Tuesday, January 21, 2020

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.

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.

sling-dynamic-include-in-aem

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

Image for post

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

sling-dynamic-include-aem

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

Image for post

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.

sling-dynamic-include-aem
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

Image for post

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

Image for post

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

Image for post

JavaScript Include

Let us now enable the SDI configuration for Java Script include, in this scenario Browser replaces the include place holder with real content through additional Ajax call after the initial page load.

Image for post

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

Image for post

The include is enabled with javascript to replace the dynamic data through the Ajax call.

Image for post

Let us review the cached content in Apache/Dispatcher — the content is enabled with javascript to replace the dynamic data through the Ajax call

Image for post

ESI Include

Let us now enable the SDI configuration for ESI include, in this scenario CDN replaces the include place holder with real content.

I am going to enable the ESI to include through Cloudflare — Akami supports the ESI by enabling some configuration, CloudFront won't support ESI by default.

Create a worker and assign the worker to a route in Cloudflare to process the ESI includes and replace it with real content before sending the response to the client.

esihandler



Image for post
sling-dynamic-include-aem

Now access the page enabled with “dynamicdata” component — this will display the logged in user name, the CDN process the ESI includes placeholder, and replace with real content.

sling-dynamic-include-aem

Let us review the cached content in Apache/Dispatcher — the content is enabled with “ESI include” to replace the dynamic data by CDN.

Image for post

The Sling Dynamic include supports different include options — SSI Include, ESI Include, and Java Script Include, each option has its own pros and cons. The include option can be selected based on the use case and the project requirement.

References










No comments:

Post a Comment