Updating large-scale site navigation with minimal revalidation

When building large-scale websites with thousands or millions of pages using Incremental Static Regeneration (ISR), updating navigation data can cause revalidating every page that includes the navigation component. Since each page regeneration consumes server resources, this widespread revalidation will result in large resource usage in terms of function duration, bandwidth, and hits on the backend.

With Vercel, you can render navigation using build-time data for fast loads, then update it using a shared endpoint to keep all pages current without individual revalidation.

In this guide, you'll learn:

• How to apply smart revalidation to update navigation without triggering full ISR revalidation for every page, thereby reducing function duration, bandwidth, and backend load.
• How to fetch navigation data on the client once per session and reuse it across pages for a consistent, fresh experience.
• How lightweight server-side caching ensures fast responses without overwhelming infrastructure.

Your navigation data stays fresh whilst maintaining good UX using the following process:

1. The initial render at build time uses server data for instant paint and no layout shift.
2. The application fetches a shared navigation endpoint once and reuses the data across pages in the same session
3. Server-side caching refreshes the endpoint periodically to keep responses current without forcing ISR revalidation of every page
4. Manual triggers such as a CMS webhook or an client-side button, can revalidate the navigation instantly
5. SWR handles recovery, automatically fetching fresh navigation data when a user reconnects to the internet

This ensures users always see up-to-date navigation while browsing the site, whether through client-side transitions or full page reloads.

Let's review how to implement this by exploring an existing demo repository.

Start by cloning and running the MegaNav Demo repository to see the implementation in action:

1
git clone https://github.com/vercel-solutions/meganav-demo.git
2
cd meganav-demo
3
pnpm install
4
pnpm run dev

1. Open http://localhost:3000 to see the demo running.
2. Click on Products in the top navigation
3. Notice how the navigation shows timestamps that update in real-time without affecting page performance

SWR provides automatic polling to keep navigation data fresh on the client side. The following component is imported in the app/layout.tsx file and used in all pages:

1
const { data: nav } = useSWR<NavigationData>('/api/navigation', fetcher, {  
2
  fallbackData,  
3
  revalidateOnFocus: false,  
4
  revalidateOnMount: true,  
5
  revalidateOnReconnect: true,  
6
  refreshInterval: 10000,  // 10 seconds for demonstration purposes only
7
});
8
// Ensure we always have data to render
9
const navigationData = nav || fallbackData;

Test SWR behavior:

1. Open the browser's Network tab
2. Watch for requests to /api/navigation every 10 seconds
3. Notice how the navigation timestamps updates automatically

The navigation API uses server-side caching with a 5-minute revalidation period. This ensures fresh data without overwhelming your server.

1
import { getNavigationData } from '@/lib/mock-nav';
2
import { NextResponse } from 'next/server';
3

4
export const revalidate = 360; // every 5 minutes for demonstration purposes
5

6
export async function GET() {
7
  // needs to be wrapped in the async function in order bundler not to pack it as static
8
  const data = await getNavigationData();
9
  return NextResponse.json(data);
10
}

You can trigger immediate navigation updates using ISR on-demand revalidation.

1
import { revalidatePath } from 'next/cache';
2
import { NextResponse } from 'next/server';
3

4
export async function GET() {  
5
  try {    
6
    revalidatePath('/api/navigation');
7
    return NextResponse.json({ revalidated: true, now: Date.now() });  
8
  } catch (err) {
9
    console.log(err);    
10
    return NextResponse.json(      
11
      { message: 'Error revalidating' },      
12
      { status: 500 },   
13
   );  
14
}}

Test manual revalidation:

1. Open http://localhost:3000
2. Click on Products in the top navigation and notice the timestamp for each item
3. Click the Simulate Headless CMS Change button
4. Watch the navigation timestamps update immediately
5. Note that the page content timestamp does not change

You can implement this system directly with a headless CMS. Instead of using a button, you will trigger revalidation with specific CMS events such as content publishing. You can do this with many CMSs using a webhook.

• Navigation API: Use on-demand ISR with 1 day time-based revalidation. If you use time-based revalidation only, set it to 5-15 minutes for fresh data.
• ISR Pages: 1-24 hours revalidation for stable content

• MegaNav Demo Repository - Clone and experiment with the complete implementation
• Next.js App Router Documentation - Learn more about Next.js routing and API routes
• SWR Documentation - Explore advanced data fetching patterns