AEM/AEMaaCS - Ajax calls and page cache - retrieve latest content without performance issues

[NitroHazeDev]

All,

I have a question , If I have a page with say 10 components with Ajax calls and has static authored content too  . If this gets deployed to end users , while the page gets cached since the js calls occur on load of a page , 

1. Would the page display the latest retrieved content via Ajax calls ? Would it be cached and serve up old content ? I would assume that the Ajax calls made on page load to servlet will serve up latest content and won’t be cached while the page (ending with .html) is cached ? Sling dynamic include,  an alternative? (question is, is it really needed) ?

2. If I have a single on load call that triggers a servlet , although page ending with .html is cached , would it return cached content or via Ajax backend call it gives us latest ? 

3. any performance issues- due to on load retrieval , how does one work towards resolving this ? -

[B_Sravan · Accepted solution]

Hi @NitroHazeDev ,

1. Caching and Dynamic Content with Ajax Calls: When a page is cached, only static content like HTML markup, CSS, and images is stored and served from the cache. Ajax calls on page load to retrieve dynamic content are not typically cached with the HTML page. These calls fetch data dynamically from the server, so they will not serve old cached content. Sling Dynamic Include (SDI) is just an alternative that allows you to include dynamic content in a cached page. SDI includes content at request time, suitable for scenarios where you need to include dynamic content that changes frequently and must always be up-to-date.
   
   

2. On Load Call Triggering a Servlet: If a single on-load call triggers a servlet, the behavior depends on how the servlet is implemented and whether caching headers are set. If the servlet sets appropriate caching headers (e.g., Cache-Control, Expires), the response may be cached by the browser or a CDN (Content Delivery Network). Subsequent requests to the same URL may return cached content until the cache expires. However, if the servlet is designed to return dynamic content without caching headers or with cache control set to no-cache, it will always return the latest content, bypassing any caching mechanisms.
   
   

3. Performance Issues and Resolutions: On-load retrieval of dynamic content can potentially lead to performance issues, especially if the backend calls are slow or if there's a large volume of dynamic content. To mitigate performance issues, you can optimize backend services to ensure fast response times, implement client-side caching for dynamic data, use asynchronous loading techniques, consider server-side caching strategies, and profile and analyze the performance of your page using tools like browser developer tools and performance monitoring tools to identify bottlenecks and areas for optimization.

Thanks,
-Sravan

[NitroHazeDev]

Thanks Sravan, helped confirm my understanding. In a nutshell, if there is a servlet invoked on load or other means , as long as the servlet has no cache headers it would retrieve upto date content (server side). Does this also mean the rest of the static authored content is retrieved from cache since .html is cached , While the dynamic content is not cached and upto date content is served 

I last used SDI for including header html stored in doc root for integration but what other examples can state the use of SDI and ajax/servlet ? I am trying to understand via examples when SDI can be used and when Ajax/servlet can be used, would be helpful if you can provide examples as such. 

[B_Sravan]

yes, that's right.

SDI is primarily used for including reusable content snippets or managing cacheable dynamic content at the component level, while Ajax calls to servlets are more suitable for retrieving dynamic data, handling user interactions, and integrating with external systems at the page level.

[NitroHazeDev]

Any examples to differentiate based on your experience  Sravan ? 
thanks for the prompt response 

[Shashi_Mulugu]

@NitroHazeDev please go through detailed article around loading dynamic content on page 

https://medium.com/tech-learnings/sling-dynamic-include-deep-dive-dynamically-include-page-component...

It all depends on type of content your want to load dynamically, where do you get that data from, how frequently data gets refreshed, where component is located on the page, above fold vs below fold and number of such dynamic components on page.

Baser on above responses to above questions we need to choose the appproach.