How can I best export and use Content Fragments (CF) and Experience Fragments (XF) for my SPA app in a headless setup? Are there differences in exposing and consuming them? Share your best practices, please!

[AEM_rookie]

I'm looking to understand the best practices for exporting and consuming Content Fragments (CF) and Experience Fragments (XF) in a headless fashion for use by SPA (Single Page Application) apps.

1. What are the key differences, if any, in exposing CFs and XFs in a headless manner?
2. Can you share any insights or best practices for keeping CFs and XFs up-to-date and synchronized with external applications?

[sherinregi · Accepted solution]

Hi @AEM_rookie 

Please find the key differences in CF and XF exports

https://experienceleague.adobe.com/docs/experience-manager-learn/sites/content-fragments/understand-...

JSON export via AEM Headless GraphQL APIs AEM Core Components Content Fragment component for use in AEM Sites, AEM Screens or in Experience Fragments. JSON export via AEM Content Services for 3rd party consumption JSON export to Adobe Target for targeted offers JSON via AEM HTTP Assets APIs for 3rd party consumption

AEM Experience Fragment component for use in AEM Sites, AEM Screens or other Experience Fragments. Export as Plain HTML for use by 3rd party systems HTML export to Adobe Target for targeted offers JSON export to Adobe Target for targeted offer

Both CF and XF's can be set with appropriate TTL's either at the dispatcher level or on the CDN level. This will help in keeping them up to date. Content like FAQ's which often doesn't get change and can be used across multiple channels can be a CF with a higher TTL and max age as per the requirements so as soon as the expiration time is reached new content can be fetched from AEM the origin server and served.