Sitemap Generation in Headless AEM Setup — AEM vs. Frontend App (React)

[Karishma_begumSh]

We’re using AEM as a headless CMS with a React frontend (using SPA/editor.html integration). I'm trying to determine the best place to generate the sitemap:

1. Should we generate the sitemap from AEM using a custom servlet or ACS Commons Sitemap Generator?

2. Or should the sitemap be generated from the React app (at build/runtime) by calling AEM APIs (e.g., content fragments/pages)?

What are the pros and cons in terms of performance, SEO, and maintainability when using headless AEM?

Would appreciate any best practices or recommendations from teams that have implemented this in a headless setup.

[SantoshSai]

Hi @Karishma_begumSh,

Two options you mentioned

Option 1: Generate Sitemap in AEM

(e.g., via ACS Commons Sitemap or custom servlet)

Pros:

• Author-driven: Authors manage content in AEM, so the sitemap stays in sync with actual content.

• Automatic updates: Every publish triggers sitemap updates (e.g., through replication or workflow).

• SEO-friendly URLs: Uses the canonical AEM structure.

• Supports multilingual and content fragment structures.

Cons:

• Extra DevOps setup: Requires exposing the AEM sitemap endpoint (/sitemap.xml) via Dispatcher.

• Customization needed: You may need logic to filter what appears (e.g., only published CFs with specific tags).

• AEM scaling concerns: Generating large sitemaps (e.g., >50K URLs) could hit performance limits.

Option 2: Generate Sitemap in React App (Build or Runtime)

(e.g., via Next.js getStaticProps() or a custom sitemap generator script)

Pros:

• Frontend has full control: Ideal for apps with dynamic routing and SEO pre-rendering (e.g., with Next.js).

• Deployment-ready: Sitemap can be generated during CI/CD builds and served statically (very fast).

• Content via AEM APIs: You can fetch published Content Fragments via GraphQL or REST and build a sitemap dynamically.

Cons:

• Content freshness: You need cache invalidation or webhook triggers to regenerate when content changes.

• Complexity for large sites: Fetching and paginating thousands of AEM entries in build scripts can get messy.

• Risk of mismatch: Content shown may differ from what authors expect unless you tightly control the API schema and filtering.

Best Practices & Recommendations

Recommended in Most Headless AEM Setups:

Use AEM (Option 1) to generate the sitemap via ACS Commons Sitemap or a custom servlet.

Why?

• Keeps authors in control.

• Ensures SEO consistency.

• Easier to support multilingual, nested paths, tags, filters, etc.

You can:

• Use ACS AEM Commons Sitemap with flexible configurations.

• Enable it for Content Fragments too by registering a custom resource resolver or template structure.

Then:

• Expose /sitemap.xml via Dispatcher/CDN

• Optionally notify Google/Bing via ping after each publish

Advanced Hybrid (Optional):

If you're using Next.js or Gatsby with Incremental Static Regeneration (ISR), you could:

• Fetch https://aem-host/sitemap.xml at build time or runtime

• Parse and rehydrate routes/pages as needed

That gives you the best of both:

• Author-driven sitemap

• Frontend-side performance and flexibility