Sitemap.xml generation in NextJS - Performance & Optimization

Performance: Sitemap.xml generation

MEDIUM IMPACT

This affects the initial page load speed and SEO crawling efficiency by providing search engines a clear map of site URLs.

Generating sitemap.xml for SEO in a Next.js app

NextJS

import { NextResponse } from 'next/server';

export async function GET() {
  const urls = await getAllUrls();
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.map(url => `<url><loc>${url}</loc></url>`).join('')}\n</urlset>`;
  return new NextResponse(sitemap, {
    headers: { 'Content-Type': 'application/xml' }
  });
}

// Server-side generation on request

Generates sitemap on server at request time, no client delay, immediate availability for crawlers.

📈 Performance GainNon-blocking client load; sitemap served in ~10ms; improves SEO crawl efficiency

Generating sitemap.xml for SEO in a Next.js app

NextJS

export default function Sitemap() {
  const urls = getAllUrls();
  return (
    <xml>
      {urls.map(url => <url><loc>{url}</loc></url>)}
    </xml>
  );
}

// This runs on client side and delays sitemap generation

Generating sitemap on client side delays sitemap availability and wastes client resources, blocking SEO bots.

📉 Performance CostBlocks rendering for 100+ ms on client; delays SEO crawling

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side sitemap generation	N/A (client DOM heavy if rendered)	N/A	Blocks client rendering	[X] Bad
Server-side sitemap generation with streaming	N/A	N/A	No client paint impact	[OK] Good

Rendering Pipeline

Sitemap.xml generation happens on the server before any client rendering. It does not affect client style calculation or paint but impacts initial server response time.

→Server Response

→Network Transfer

⚠️ BottleneckServer-side generation time if sitemap is large or inefficiently generated

Core Web Vital Affected

LCP

This affects the initial page load speed and SEO crawling efficiency by providing search engines a clear map of site URLs.

Optimization Tips

1Always generate sitemap.xml on the server, not client.

2Cache sitemap output to reduce server load and response time.

3Serve sitemap.xml with correct XML content-type header.

Performance Quiz - 3 Questions

What is the best place to generate sitemap.xml in a Next.js app for performance?

A On the server side during the GET request

B On the client side after page load

C Using a client-side API call after user interaction

D Generating sitemap in a React component render

DevTools: Network

How to check: Open DevTools > Network tab > Reload sitemap.xml URL > Check response headers and timing

What to look for: Look for fast server response time (<50ms) and Content-Type: application/xml header