I'm trying to do incremental static regeneration (ISR) in next.js app router. This is what I came up with:

export default async function AdminPanel(){
    //Fetch user management page with ISR caching
    const data=await fetch(process.env.NEXT_PUBLIC_NodeURL+'/admin/panel/api',{
        next:{ revalidate: 86400}//24 hrs revalidate
    }).then((response)=>response.json())

return(//use data etc

And my code in the fetch directory

import { NextResponse } from 'next/server';

import { getISRdata_adminPanel_controller } from '@/server/controllers/admin';

// called from admin/panel/page.js
export async function GET(){
    return NextResponse.json(await getISRdata_adminPanel_controller())
}

It is working and I'm getting my data. My question is concerning the revalidation, shouldn't it refresh the cache every 24 hours according to my interval? I uploaded my project on vercel and changed the data but has been waiting 4 days now but the cache still has not refreshed. I assumed a revalidation interval of 1 means 1 second so 84600 equals 24 hours; or am I wrong? How to set this to refresh every 24 hours?

I'm trying to do incremental static regeneration (ISR) in next.js app router. This is what I came up with:

export default async function AdminPanel(){
    //Fetch user management page with ISR caching
    const data=await fetch(process.env.NEXT_PUBLIC_NodeURL+'/admin/panel/api',{
        next:{ revalidate: 86400}//24 hrs revalidate
    }).then((response)=>response.json())

return(//use data etc

And my code in the fetch directory

import { NextResponse } from 'next/server';

import { getISRdata_adminPanel_controller } from '@/server/controllers/admin';

// called from admin/panel/page.js
export async function GET(){
    return NextResponse.json(await getISRdata_adminPanel_controller())
}

It is working and I'm getting my data. My question is concerning the revalidation, shouldn't it refresh the cache every 24 hours according to my interval? I uploaded my project on vercel and changed the data but has been waiting 4 days now but the cache still has not refreshed. I assumed a revalidation interval of 1 means 1 second so 84600 equals 24 hours; or am I wrong? How to set this to refresh every 24 hours?

• next.js
• nextjs14
• app-router

• I recommend using await instead of then (const data = await res.json() where res is what you initialized as data) – HairyHandKerchief23 Commented Feb 6 at 20:46

2 Answers 2

ISR caching isn't revalidating likely due to vercel global caching layer or misconfigured fetch options

Solutions:

1- Ensure fetch uses next: { revalidate: 86400 }

Try forcing revalidation:

await fetch(process.env.NEXT_PUBLIC_NodeURL + '/admin/panel/api', {
  next: { revalidate: 86400 },
  cache: "no-store",
});

2- Use revalidatePath() (Next.js 13+ with App Router) in an API route:

import { revalidatePath } from 'next/cache';

export async function GET() {
    revalidatePath('/admin/panel');
    return NextResponse.json({ revalidated: true });
}

If ISR still doesn’t work try deploying a new version as Vercel sometimes locks the cache for deployed builds

I guess you will also have to look at Cache-Control header of the page and its values, this can help vercel to return the page directly from edge network only, you might have values public, immutable, and may be the reason for revalidation not working.

I'm not 100% sure but once try changing revalidation time to 2 minutes and Cache-Control headers to never cache anything and try. also can read more here - https://vercel.com/docs/edge-network/caching