Friday, 7 November 2025

Edge Side Include (ESI) vs Sling Dynamic Include (SDI) in AEM as a Cloud Service

When delivering high-performance websites with Adobe Experience Manager (AEM), caching plays a vital role. However, not all content can be cached the same way — some sections (like user info or personalized banners) need to be rendered dynamically while most of the page remains cached.

To address this, AEM supports two major approaches:

  • Edge Side Include (ESI)
  • Sling Dynamic Include (SDI)

This article explains how each works, their differences, and when to use them.


What is Sling Dynamic Include (SDI)?

Sling Dynamic Include (SDI) is an AEM-specific feature that lets you replace specific parts of a cached page with dynamically rendered fragments. It works within the AEM Dispatcher or Apache Sling layer.

SDI replaces a component’s output with a server-side include (<!--#include-->) so that only those parts are fetched dynamically on every request, while the rest of the page is cached.

Example


<!-- Original AEM component -->
<div data-sly-resource="/content/site/en/userinfo"></div>

<!-- After SDI processing -->
<!--#include virtual="/content/site/en/userinfo.html" -->

In this setup, even when the page is cached at the dispatcher, the user info component is re-fetched dynamically.

Key Use Cases

  • Personalized welcome messages
  • Shopping cart status or counts
  • Dynamic banners or time-sensitive content

Advantages

  • Works fully within the AEM–Dispatcher setup
  • Easy to configure using OSGi settings
  • No dependency on CDN

Limitations

  • Runs at the origin (dispatcher), not at the edge
  • Can add server-side overhead for multiple dynamic fragments
  • Less efficient for globally distributed traffic

What is Edge Side Include (ESI)?

Edge Side Include (ESI) is a CDN-level technology that allows partial page assembly at the network edge. It is supported by CDNs such as Fastly, Akamai, and CloudFront.

With ESI, cached pages can contain <esi:include> tags. These fragments are fetched and rendered dynamically at the CDN before sending the response to the user. This reduces load on AEM and speeds up delivery.

Example


<html>
  <body>
    <esi:include src="/fragments/userinfo.html"/>
  </body>
</html>

Key Use Cases

  • Global personalization via CDN edge
  • Dynamic fragments in high-traffic websites
  • Reducing origin load while keeping partial freshness

Advantages

  • Personalization at the CDN edge (faster delivery)
  • Reduces requests to AEM Publish
  • Scales globally for high traffic

Limitations

  • Requires CDN that supports ESI (e.g., Fastly, Akamai)
  • More complex debugging at edge level
  • Limited testing in local environments

Comparison: ESI vs SDI

Feature / Aspect Sling Dynamic Include (SDI) Edge Side Include (ESI)
Processing Location AEM Dispatcher / Origin CDN Edge (Fastly, Akamai)
Purpose Dynamic inclusion at origin Fragment assembly at CDN edge
Performance Impact Moderate, depends on dispatcher load High performance, offloads AEM
Caching Level Dispatcher or AEM Cache CDN-level Cache
Best For Small-scale personalization Global personalization & edge caching
Dependencies AEM + SDI bundle CDN (Fastly, Akamai)
Setup Complexity Low Medium to High
Personalization Depth User/session-based at origin Anonymous user personalization at edge
Example Tag <!--#include virtual="..." --> <esi:include src="..." />

How They Fit in AEM Cloud

In AEM as a Cloud Service, both SDI and ESI are supported. However, Adobe recommends using ESI for cloud deployments because:

  • It integrates natively with the Fastly CDN used by AEM Cloud.
  • Personalization and fragment assembly happen at the edge, improving time-to-first-byte (TTFB).
  • It reduces load on AEM’s origin servers, improving scalability.

Still, SDI remains useful in lower environments, development, or internal networks where a CDN may not be available.


Best Practices

  • Use ESI for edge personalization and global traffic.
  • Use SDI for simple dispatcher-level dynamic includes.
  • Avoid nested includes (either ESI or SDI).
  • Always check cache headers for fragment freshness.
  • Monitor performance using AEM Cloud metrics.

Conclusion

Both Edge Side Include (ESI) and Sling Dynamic Include (SDI) allow partial page caching in AEM without sacrificing personalization. The choice depends on scale and infrastructure:

  • Use SDI for small-scale or internal personalization.
  • Use ESI for large-scale, global personalization and high-performance delivery.

Together, they help AEM developers balance caching efficiency with personalized content delivery.


Tags: AEM Cloud, Adobe Experience Manager, Edge Side Include, Sling Dynamic Include, Fastly CDN, AEM Performance, Caching, Personalization

No comments:

Post a Comment