Sling Dynamic Include Explained: AEM Performance and Personalization Guide

Adobe Experience Manager (AEM) is a powerful content management system that emphasizes delivering personalized and dynamic content at scale. However, balancing the need for high performance with personalization can be challenging, especially when caching static and dynamic content together. This is where Sling Dynamic Include (SDI) becomes a valuable tool. SDI allows developers to maximize caching efficiency by separating dynamic, frequently changing content from static, cacheable parts of a page.

In this discussion, we explore what Sling Dynamic Include is, its benefits, and how it can be configured in AEM to improve performance and personalization. We’ll walk through detailed steps, including proper coding examples, to help you implement this feature effectively.

What is Sling Dynamic Include?

Sling Dynamic Include is an Apache Sling library that enables you to replace specific components of a cached page with dynamically included content during runtime. This is useful when part of your page content changes frequently (e.g., user-specific information like login status, cart details, or dynamic widgets) and cannot be efficiently cached.

Instead of rendering the dynamic content at request time on the server for each user, SDI allows you to:

1. Cache the majority of the page.
2. Dynamically inject only the variable parts into the cached page.

Benefits of Sling Dynamic Include

1. Improved Caching Efficiency:

• Allows most of the page to be cached while dynamically including only specific parts.
• Reduces server load by minimizing the need to bypass the cache.

2. Improved Performance:

• Pages load faster because static content is served from the cache, and only small parts of the page are rendered dynamically.

3. Flexibility:

• Works with both AEM Dispatcher and CDNs.
• Supports various rendering methods such as Server-Side Includes (SSI) or AJAX.

4. Personalization:

• Dynamic content like user-specific data (cart details, user profile info) can be loaded without affecting the cacheability of the rest of the page.

Sling Dynamic Include Configuration in AEM

Step 1: Add the SDI Bundle to Your AEM Project

The SDI bundle must be added to your project. You can include it in your Maven project by adding the dependency:

<dependency>
    <groupId>org.apache.sling</groupId>
    <artifactId>org.apache.sling.dynamic-include</artifactId>
    <version>4.0.0</version> <!-- Use the latest version -->
</dependency>

Step 2: Configure Sling Dynamic Include

Create an OSGi configuration for org.apache.sling.dynamicinclude.Configuration.

OSGi Configuration

You can create this configuration either in the AEM Web Console or as a file in your project at ./apps/<project-name>/config.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="sling:OsgiConfig"
    include-filter.config.enabled="{Boolean}true"
    include-filter.config.path="/content/ucgorai/us"
    include-filter.config.resource-types="[ucgorai/components/content/sdi]"
    include-filter.config.include-type="SSI"
    include-filter.config.add_comment="{Boolean}false"
    include-filter.config.selector="nocache"
    include-filter.config.ttl=""
    include-filter.config.required_header="Server-Agent=Communique-Dispatcher"
    include-filter.config.ignoreUrlParams="[]"
    include-filter.config.rewrite="{Boolean}true"
    />

Parameters Explained

• Enabled — enable SDI
• Base path — This SDI configuration will work only for paths matching this value. If the value starts with a ^ character, regular expression matching will be performed. Otherwise it will try to match the value as a path prefix.
• Resource types — specifies which components should be replaced with tags
• Include type — type of the include tag (SSI, ESI or JavaScript)
• Add comment — adds a debug comment: <!-- SDI include (path: %s, resourceType: %s) --> to every component replaced
• Filter selector — the selector used in the request to get actual content
• Component TTL — time to live in seconds, set for rendered component (requires Dispatcher 4.1.11+ or another caching proxy that respects the max-age directive of the Cache-Control HTTP header)
• Required header — SDI will be enabled only if the configured header is present in the request. By default it’s Server-Agent=Communique-Dispatcher header, added by the AEM Dispatcher. You may enter just the header name only or the name and the value split with =.
• Ignore URL params — SDI normally skips all requests containing any GET parameters. This option allows to set a list of parameters that should be ignored in the test.
• Include path rewriting — enable rewriting link that is used for dynamic content inclusion.

Step 3: Update Dispatcher Configuration

Dispatcher configuration needs to be adjusted to allow SSI tags and ensure the caching behavior aligns with SDI requirements.

Enable the Include module

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

LoadModule include_module libexec/apache2/mod_include.so

Update the vhost file

Add the following directive to your Apache configuration. Add these directive under that directory where you mentioned the document root.

<Directory /Library/WebServer/docroot/publish>

      Options FollowSymLinks Includes
      AllowOverride None
      AddOutputFilter INCLUDES .html

 </Directory>

a. Options FollowSymLinks Includes

Defines specific behaviors for how Apache handles file operations and server-side includes within the directory scope of that vhost or configuration block. It is particularly relevant when configuring a server to support Sling Dynamic Include (SDI).

**FollowSymLinks**:

• This option allows Apache to follow symbolic links (symlinks) that point to files or directories.
• If this option is not set, attempts to access symlinked resources will fail.
• For SDI, this is important if your include or cache directories involve symlinks (e.g., to shared resources). It ensures that the web server can resolve and serve these resources properly.

**Includes**:

• This option enables Server-Side Includes (SSI), a feature that allows dynamic content to be included in HTML pages. SSI lets the server evaluate directives embedded in HTML files and include dynamic content, such as the output of other scripts or files.
• For SDI, this is crucial because SDI uses SSI to dynamically include fragments of content, often as part of caching and content assembly workflows.

Relevance to Sling Dynamic Include (SDI)

Dynamic Fragment Inclusion:

• SDI transforms specific content fragments in an AEM page into SSI placeholders.
• These placeholders are processed by the web server at request time to include the dynamically generated content.
• The Includes option enables the server to evaluate and replace the SSI directives with the actual dynamic content at runtime.

Handling Symlinks in Cache or Include Paths:

• SDI often works with cache or resource directories where symbolic links might point to shared resources or fragments.
• FollowSymLinks ensures that Apache can resolve and serve these symlinked resources correctly.

Optimized Content Assembly:

• By allowing SSI directives to work and follow symlinks, the directive ensures that SDI can seamlessly serve pages that combine static and dynamic content.
• This setup improves performance and enables caching at the edge for static and dynamic fragments.

b. AddOutputFilter INCLUDES .html

**AddOutputFilter Directive**:

• This Apache directive applies a specified output filter to files with a particular extension or type.
• Output filters in Apache are modules or functionalities that process content after it has been generated by the server but before it is sent to the client.
• The INCLUDES filter enables processing of Server-Side Includes (SSI) directives embedded in the content.

**.html Extension**:

• The .html extension specifies the type of files to which the INCLUDES filter should be applied.
• This means that only .html files will be scanned and processed for SSI directives when served by the web server.

How It Works in the Context of SDI

1. SDI Functionality:

• SDI replaces dynamic content in AEM or Sling-generated pages with SSI directives during page rendering.
• These SSI directives instruct Apache to fetch and insert specific content (e.g., personalized fragments) into the HTML response dynamically

2. Processing with AddOutputFilter INCLUDES .html:

When a .html file containing SSI directives is served:

• Apache applies the INCLUDES output filter.
• The filter scans the content for SSI directives (e.g., <!--#include ... -->) and processes them.

The result is a fully rendered HTML response sent to the client, where the included fragments are dynamically retrieved and inserted by Apache.

Update the dispatcher.any

a. Whitelist Required Selectors:

/filter {
    /0002 { /type "allow" /url "/content/ucgorai/*" /selectors "nocache" }
}

b. Define Cache Exclusions:

/rules {
    /0002 {
        /glob "*.nocache.htnl.*"
        /type "deny"
    }
}

c. Restart Apache HTTP Web Server after making changes to its configuration files or the dispatcher.any.

Step 4: Validate the configuration

Refresh page multiple time will show the same content. Also you can check the dispatcher.log.

Sequence Diagram

Comparison SSI vs JSI vs ESI

Server-Side Include (SSI)

How it Works: SSI uses the web server (e.g., Apache, Nginx) to include the dynamic content. The page served to the user contains an include directive, and the web server processes this directive to fetch the content dynamically.

• Use Case: Suitable for environments where the web server supports SSI and the goal is to offload dynamic content fetching from the application server.
• Performance: Highly efficient because the include happens on the server before delivering the page to the browser.
• Caching: Works well with caching mechanisms like CDN as the included content is fetched server-side and sent as part of the full response.
• Dependencies: Requires web server configuration to enable SSI.
• Browser Dependency: No dependency on the browser since processing happens on the server.

Pros:

• Server-side rendering ensures compatibility with all browsers.
• Better for SEO as the final page is fully constructed server-side.

Cons:

• Limited flexibility compared to client-side techniques.
• Requires web server support for SSI.

JavaScript Include (JSI)

How it Works: JSI uses JavaScript on the client side to fetch and include dynamic content. This is typically done using AJAX or similar techniques.

• Use Case: Best suited for scenarios where dynamic content doesn’t need to be server-side rendered and can be loaded asynchronously.
• Performance: May slightly delay the rendering of dynamic content, depending on network latency and the client’s browser performance.
• Caching: Caching can be managed at the client or server level, but CDN caching may be less effective since dynamic content is loaded separately.
• Dependencies: Requires a modern browser with JavaScript enabled.
• Browser Dependency: Fully depends on the browser to execute the JavaScript.

Pros:

• Reduces server-side processing load.
• Content can be loaded asynchronously, potentially improving perceived page load speed.

Cons:

• Not SEO-friendly as dynamic content is rendered after the page load.
• May not work if JavaScript is disabled or blocked.

Edge-Side Include (ESI)

How it Works: ESI relies on an intermediate caching layer (like a CDN) to process include directives and dynamically fetch content. The CDN replaces placeholders with the actual content before serving the page to the client.

• Use Case: Ideal for sites leveraging CDNs like Akamai or Cloudflare for edge-side rendering of dynamic content.
• Performance: Extremely fast for end-users as dynamic content is processed at the edge (closer to the user).
• Caching: Highly compatible with CDN caching as ESI is designed to work at the edge.
• Dependencies: Requires a CDN or caching layer that supports ESI.
• Browser Dependency: No browser dependency since processing happens at the edge.

Pros:

• Excellent performance due to edge-side processing.
• Offloads work from both the application server and the client.

Cons:

• Requires specific CDN or infrastructure support for ESI.
• Configuration can be more complex than SSI or JSI.

Choosing the Right Mode

• Use SSI for environments with strong server-side caching and traditional server setups.
• Use JSI for modern applications focusing on asynchronous loading and user experience.
• Use ESI for high-performance websites leveraging CDNs for scalability and speed.

Conclusion

Sling Dynamic Include (SDI) is a highly effective solution for managing dynamic and personalized content in AEM while maintaining optimal caching performance. By isolating the dynamic portions of your site and delivering them separately, SDI allows for a seamless combination of high-speed cached content and real-time personalized updates. This approach improves user experience and reduces server load, making it a critical tool for modern web development in AEM.

By following the configuration steps and coding examples provided in this discussion, you can implement SDI in your AEM project to achieve a balance between performance, scalability, and personalization. Whether you’re working with server-side includes, AJAX, or other dynamic rendering techniques, SDI ensures that your content strategy aligns with the technical demands of your application.