Header changes in 20 lack pages best practice. | Community
Skip to main content
V
VB_Dev
New Member
March 5, 2025
Solved

Header changes in 20 lack pages best practice.

  • March 5, 2025
  • 3 replies
  • 529 views

Hi Team,

Multiple times we have been asked to update the header with colour or add menu items and so on.

In our production page size almost 20+ lacks pages.

Changing header and warming up the dispatcher is headache. Can any one suggest best approaches.

Header in in experience fragments. 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anil_Chennapragada

hi @vb_dev ,

There are various ways to handle this scenario like SSI / ESI / Client side handling each of which have its own pros and cons. so based on the business requirement of how frequently header changes and other scenarios, please consider one of the below scenarios to optimize the page performance and caching

  • SSI : Server-Side Includes can be used to dynamically include the header content without embedding it directly into each page. This way, only the header fragment needs to be updated and cached separately.
  • Client Side Includes : Use JavaScript to load the header dynamically on the client side. This method ensures that the header is fetched independently of the page content.
  • ESI : ESI is similar to SSI but is processed by the CDN or edge server. This approach can offload the processing from your origin server.

A good article for reference online : https://medium.com/tech-learnings/sling-dynamic-include-deep-dive-dynamically-include-page-components-in-aem-5420a696cd02

 

Thanks,

Anil

3 replies

iamnjain
Community Advisor
iamnjainCommunity Advisor
Community Advisor
March 5, 2025

Hi @vb_dev 

Did you mean, you have Header configured in Experience Fragment and same XF being used on all your pages? If so, then you need to make change once and It will take affect on all the pages

What is the your issue here?

 

    MonalikaKapoor
    Adobe Employee
    MonalikaKapoorAdobe Employee
    Adobe Employee
    March 5, 2025

    Hi @vb_dev,

    Since the header is already in Experience Fragments, ensure that you are leveraging this feature to its fullest potential. Experience Fragments allow you to create reusable content that can be shared across multiple pages, reducing redundancy and making updates easier. [1]
    Leverage Content Fragments and Templates by using Content Fragments to manage structured content separately from presentation, enabling modularization of header content. Ensure your page templates incorporate the Experience Fragment for the header, so updates to the Experience Fragment automatically reflect across all pages using that template. [2] 

    You can implement Caching Strategies [3] as follows:

    - Instead of flushing the entire cache, use targeted cache invalidation to only update the parts of the cache that have changed.
    - Use cache segments to isolate parts of your cache. This allows you to clear or refresh specific parts without affecting the whole cache.
    - Configure the dispatcher to serve stale content while new content is being rendered. This minimizes the impact on users during updates

    Refer to these documentations for more details.

    [1] https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/content-fragments/understand-content-fragments-and-experience-fragments
    [2] https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/project-archetype/pages-templates
    [3] https://experienceleague.adobe.com/en/docs/experience-manager-learn/dispatcher-tutorial/chapter-3

     

      A
      Anil_ChennapragadaAccepted solution
      Level 4
      March 5, 2025

      hi @vb_dev ,

      There are various ways to handle this scenario like SSI / ESI / Client side handling each of which have its own pros and cons. so based on the business requirement of how frequently header changes and other scenarios, please consider one of the below scenarios to optimize the page performance and caching

      • SSI : Server-Side Includes can be used to dynamically include the header content without embedding it directly into each page. This way, only the header fragment needs to be updated and cached separately.
      • Client Side Includes : Use JavaScript to load the header dynamically on the client side. This method ensures that the header is fetched independently of the page content.
      • ESI : ESI is similar to SSI but is processed by the CDN or edge server. This approach can offload the processing from your origin server.

      A good article for reference online : https://medium.com/tech-learnings/sling-dynamic-include-deep-dive-dynamically-include-page-components-in-aem-5420a696cd02

       

      Thanks,

      Anil

        Terms & ConditionsAccessibility statement

        Loading footer...