Content is not properly displaying on dispatcher URL

[NaveenT1]

Hi Team,

I have a requirement where we have timer on page, we have to display the content1 (div1) during the timer running and on completion of timer, the page should refresh and display the different content (div 2).

This is working fine on author but on runway page the content is not changing after refresh. I know it is happening because of caching (after adding query parameters on URL it's working fine). Is there a way to fix this issue? 

[arunpatidar]

Hi @NaveenT1 

There are two possible solutions to address this issue:

1. Client-Side Javascript: Use JavaScript to dynamically show or hide content. You can expose the time via a meta tag or make an HEAD request to the component/page to fetch the current time.

2. Sling Dynamic Include (SDI): Implement SDI for the component and disable caching to ensure real-time updates. More details can be found here: Sling Dynamic Include.

[narendiran_ravi]

Hi @NaveenT1 ,

Instead of refreshing the page, consider using AJAX calls to fetch updated content and replace the current content without a full page reload. This ensures that the latest content is fetched directly from the server.

[AmitVishwakarma]

Hi @NaveenT1 ,

Root Cause:

     - Dispatcher caches the page (HTML output) and serves it again on refresh.

     - So even after the timer completes and the page reloads, the same cached content (with div1) is served.

There are two possible solutions to address this issue:

Option 1: Sling Dynamic Include (SDI) – Production Ready Fix

How it Works:

     - SDI allows parts of the page (components) to be dynamically included via AJAX.

     - Dispatcher caches the page shell, but your component (div1/div2) is fetched fresh from the server.

Steps:

     - Install SDI in AEM if not already: Add Sling Dynamic Include bundle.

     - In your component's HTL, wrap div1/div2 logic:

<!-- Example -->
<sling:include path="/content/your-page/jcr:content/div-component" resourceType="your/components/div" />

     - In the dispatcher config, set up to not cache .shtml files (used by SDI).

     - Configure SDI in AEM:

          - Go to /system/console/configMgr → Find SDI Configuration

          - Enable for your component/resourceType

          - Set include type = SSI or ESI based on your setup.

     - Dispatcher Config Update:

# Never cache shtml files (used for SDI)
<FilesMatch "\.shtml$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
</FilesMatch>

Option 2: AJAX + No Page Refresh (Highly Recommended)

Instead of refreshing, use AJAX to swap content when timer completes.

How:
     - On page load → Start timer → Show div1.
     - When timer ends → Call AJAX to fetch div2 HTML, replace content without page reload.
Why this works? Dispatcher caching only affects full page loads. AJAX bypasses caching and fetches fresh content.

Option 3: Force Cache Busting Without Query Params

If you must reload the page, and can’t use AJAX or SDI, use cache-busting headers or short TTL.

Regards,
Amit