Next.js App Router中ISR缓存未按预期重新验证问题

问题场景 #

在Next.js App Router中实现增量静态再生（ISR），页面组件中通过fetch配置了next: { revalidate: 86400 }，预期缓存每24小时刷新一次。但部署到Vercel后修改数据源，等待4天缓存仍未更新。

相关代码 #

页面组件（admin/panel/page.js）

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(/* 使用data渲染页面内容 */)
}

API路由（app/admin/panel/api/route.js）

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())
}

疑问点 #

• 对revalidate值的理解是否正确：1代表1秒，86400代表24小时？
• 如何正确配置才能让缓存每24小时自动刷新？

已验证的解决方案 #

在API路由文件中添加export const dynamic="force-dynamic";后，Vercel上的缓存开始正常按预期刷新。修改后的API路由代码如下：

import { NextResponse } from 'next/server';

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

export const dynamic="force-dynamic";//强制每次请求获取最新数据

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

关键说明 #

1. 你对revalidate值的理解完全正确：该配置的数值单位为秒，1对应1秒，86400对应24小时。
2. 原问题的核心原因：Next.js App Router中API路由默认会被静态缓存，导致即使页面组件配置了revalidate，也无法触发API数据的重新验证。添加dynamic="force-dynamic"会强制API路由每次请求都拉取最新数据，配合页面组件的revalidate配置，就能实现页面每24小时重新生成并加载最新数据。

内容的提问来源于stack exchange，提问作者D. Rattansingh