XML Sitemaps for React, Next.js, Vue, Nuxt and Single Page Applications

Why JavaScript websites need a clear sitemap strategy

A traditional sitemap generator usually discovers pages by crawling links. That works well when the website is mostly static and every important URL is easy to find from normal HTML links.

But many JavaScript websites work differently. A React app may load products after the page opens. A Vue app may render routes from an API response. A Nuxt site may use dynamic pages for blog posts, documentation, categories, or products. A Next.js project may generate routes from a headless CMS, but the full list of pages still comes from backend data.

For example, a website may have URLs like:

But those URLs may be generated from API data. If the source of truth is the API, crawling the frontend is only a workaround. A better workflow is to map that data directly into sitemap URLs.

The problem with crawler-only sitemap generation for SPAs

Crawler-only sitemap tools can struggle with JavaScript-heavy websites for several reasons.

Some pages may only appear after API calls. Some links may be rendered after user interaction. Some routes may be hidden behind pagination, infinite scroll, filters, tabs, search, or client-side navigation. Some URLs may exist in the app router but may not be linked from the homepage in a way that a basic crawler can follow.

This can lead to incomplete sitemaps. A crawler may find the homepage and about page, but miss specific products like /products/blue-hoodie or /products/wireless-keyboard.

That does not mean the pages do not exist. It means the crawler did not discover them. For a Single Page Application, a sitemap should not depend only on what the crawler can click. It should reflect the real route structure of the website.

API-based sitemap generation for JavaScript frameworks

Most modern JavaScript websites have two parts: The frontend framework controls the user experience. The backend data controls the pages.

SitemapFlow focuses on the second part. If your React, Next.js, Vue or Nuxt website gets pages from a REST API, you can generate a sitemap from the same data that powers the frontend.

By defining a URL pattern like /blog/[response.slug], SitemapFlow maps fields from the API response into the route pattern.

The framework does not need to be the sitemap source. The API can be the source.

React sitemap generator workflow

React applications are often client-side rendered, API-driven, or built as SPAs. If your React app uses React Router, dynamic views, or API-loaded content, your URL structure may not be available as simple static files.

The dynamic parts usually come from data. In SitemapFlow, the URL pattern can be /products/[response.slug] or /[response.category]/[response.slug].

This creates a clean sitemap for dynamic React routes without manually writing every product URL.

SitemapFlow handles this by mapping your API response into sitemap URL patterns.

• static pages
• client-side routes
• dynamic product pages
• blog routes
• documentation routes
• API-based URLs

Next.js dynamic sitemap workflow

Next.js websites often use dynamic routes such as /products/[slug], /blog/[slug], or /docs/[category]/[slug].

The page structure may come from a CMS, database, API endpoint, or external service. A Next.js site may generate pages from data during build time, server rendering, or API fetching. But for sitemap generation, the important question is simple: Where does the list of URLs come from?

If the answer is an API, CMS, or backend endpoint, SitemapFlow can use that source directly.

This makes SitemapFlow useful when you need a Next.js dynamic sitemap, a sitemap from CMS data, or a sitemap for routes that are not easy to discover through crawling alone.

Vue sitemap generator workflow

Vue websites can range from small SPAs to large API-driven applications.

If your articles or products come from a REST API, the sitemap can be generated from that API response using a pattern like /articles/[response.slug].

This is useful for Vue websites where the frontend displays API content but the sitemap needs a complete list of indexable URLs. Instead of relying only on a crawler, SitemapFlow lets you describe the route pattern and use the API as the source.

Nuxt sitemap workflow

Nuxt websites are often used for content, documentation, landing pages, marketplaces, SaaS websites, and e-commerce frontends.

A Nuxt site may include static pages and dynamic pages at the same time. If those dynamic pages come from an API, SitemapFlow can generate the sitemap by mapping response fields.

This makes SitemapFlow useful for Nuxt dynamic routes, nested routes, content APIs, and headless CMS data.

Static pages and dynamic routes in one sitemap

A good sitemap for a JavaScript website usually needs both static and dynamic URLs.

Static pages are manually known (/, /about, /pricing). Dynamic routes are generated from data (/products/[response.slug], /profiles/[response.userId]).

SitemapFlow separates these two parts so the sitemap is easier to understand and maintain. You can add static pages in one step, then connect API endpoints for dynamic routes.

That matters because the homepage and pricing page do not need an API. But product pages or profiles often do. A crawler-only tool may mix everything together. SitemapFlow lets you define the structure intentionally.

Relative and absolute URL patterns for SPA routes

SitemapFlow supports both relative paths and full URLs.

A relative path is best when the generated route should use the current scope domain or custom domain. A full URL is useful when the route belongs to another domain, subdomain, locale, or separate application.

This gives React, Next.js, Vue and Nuxt projects enough flexibility to match real production URL structures.

• app subdomains
• documentation subdomains
• language subdomains
• regional domains
• marketing sites
• storefronts

Mapping API fields into JavaScript route patterns

Dynamic routes are usually built from fields such as id, slug, category, userId, locale, type, or updatedAt. SitemapFlow maps those fields with [response.field].

This is useful because real APIs often return nested data. A pattern such as /[response.category.slug]/[response.slug] can avoid manually building URL lists outside the app.

Handling headless CMS data

React, Next.js, Vue and Nuxt are often used with headless CMS platforms. The frontend is only responsible for rendering the page. The CMS stores the content.

A headless CMS may return posts, pages, authors, categories, or localized versions through an API.

For headless websites, this is often cleaner than crawling rendered pages. The CMS already knows which pages exist. SitemapFlow uses that source to generate the sitemap.

Handling e-commerce routes in JavaScript apps

Many e-commerce frontends are built with React, Next.js, Vue or Nuxt. The product catalog usually lives in an API.

For e-commerce SEO, the sitemap should include the canonical product URL, not every duplicate route. SitemapFlow helps you define the pattern that matches the real URL you want search engines to discover.

JavaScript SEO and sitemap discovery

An XML sitemap does not replace good internal linking, crawlable pages, useful content, or proper rendering. But it does help search engines discover important URLs.

For JavaScript-heavy websites, that matters because important pages may be generated from data instead of appearing as plain static links in the initial HTML.

The sitemap should not include internal API URLs, admin routes, private dashboards, staging pages, or duplicate filtered URLs. It should match the public routes users can actually visit.

Common mistakes with SPAs and dynamic route sitemaps

A common mistake is generating a sitemap that only includes static pages, ignoring hundreds of real dynamic URLs. Another mistake is submitting frontend route patterns instead of final URLs (e.g., submitting /products/[slug] instead of /products/blue-hoodie).

Other common mistakes include:

A strong sitemap workflow should include an audit step before export. SitemapFlow helps detect empty URL patterns and missing variables before generating the final XML.

• including API endpoint URLs instead of page URLs
• missing dynamic routes
• including private dashboard routes
• generating duplicate product URLs
• ignoring localized paths
• forgetting custom domains
• mapping the wrong nested JSON field

Should a JavaScript app use a crawler or an API-based sitemap?

Both approaches can be useful. A crawler is helpful when your website is mostly static and all important links are easy to discover. An API-based sitemap is helpful when your website has dynamic routes generated from structured data.

Use an API-based sitemap when routes come from a REST API, pages come from a headless CMS, products come from a catalog API, localized URLs are generated from data, or when the crawler misses important dynamic pages.

For many modern JavaScript websites, the API is the more accurate source.

A practical sitemap workflow for React, Next.js, Vue and Nuxt

• List your static pages.
• Identify your dynamic route types and find the API endpoint for each.
• Check which response fields create the final page URL.
• Define the URL pattern using [response.field].
• Use relative paths or full URLs depending on the route.
• Add lastmod, image fields, or alternate languages if provided by the API.
• Generate the sitemap and review the audit report.