Header changes in 20 lack pages best practice.

[VB_Dev]

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. 

[iamnjain]

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]

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/understa...
[2] https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...
[3] https://experienceleague.adobe.com/en/docs/experience-manager-learn/dispatcher-tutorial/chapter-3

[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-component...

Thanks,

Anil