Reuse experience fragments in EDS

​@arunpatidar ​@BrianKasingli Tagging you to see if you might want to share any best practices or insights on this topic. Your expertise would be greatly appreciated, thank you!

​@SCTech ,  I hope this helps.

Re-use XF on Header and Footer on EDS website.

From one of the implementations at https://www.splunk.com/en_us/blog , their EDS blog runs under the same domain space as their AEM classic website. If you inspect the network tab in the browser, you can see that the page initially loads with an empty <header> element.

After the page loads, a network request is made to retrieve the header markup from their AEM classic site at:

https://www.splunk.com/en_us/blog/fragments/header.plain.html 
 

The .plain.html rendition returns clean HTML from the Experience Fragment. That HTML is then injected into the page by replacing the contents of the <header> element.
 

However, the .plain.html file only returns the markup. Any required JavaScript behavior and CSS styling must be re implemented separately within the EDS project. This is something I observed in production while analyzing how they reused their header.
 

The same approach is used for the footer. The Splunk blog makes a request to:

https://www.splunk.com/en_us/blog/fragments/footer.plain.html 
 

Once the response is returned, JavaScript replaces the contents of the <footer> element with the HTML from the .plain.html file. Again, any necessary JavaScript logic and CSS styling must be re implemented within the EDS site to ensure the footer behaves and looks correct.
 

This pattern allows the header and footer to remain centrally managed in AEM, while still being reused inside EDS pages.

Take a look at https://www.splunk.com/en_us/blog, and analyze to see how this pattern is achieved. 

You need to update blocks/header.js and blocks/footer.js to load HTML from AEM
The new path would be <XF path>.content.html 

Below code needs to be adjusted,

 const navPath = navMeta ? new URL(navMeta).pathname : '/nav';
 const resp = await fetch(`${navPath}.plain.html`);

If you are not using same domain for EDS and AEM content then use full path above.