Next.js 15使用ISR时数据不更新，无需硬刷新如何修复？

你的问题核心是Next.js的多层缓存机制导致页面无法及时获取最新博客数据，以下是针对性修复方案：

1. 调整数据获取的缓存策略 #

当前代码中revalidate:20设置了20秒缓存有效期，但浏览器或Next.js的默认缓存策略可能延迟更新。通过以下修改强制每次请求拉取最新数据：

async function getPost() {
  const res = await fetch(
    "https://67585e5260576a194d10384b.mockapi.io/blogs",
    {
      next: {
        revalidate: 0, // 立即验证缓存，确保获取最新数据
      },
      cache: 'no-store', // 禁用请求级缓存
      headers: {
        'Cache-Control': 'no-cache', // 避免浏览器缓存旧响应
      },
    }
  );
  const post = await res.json();
  return post;
}

2. 强制页面动态渲染 #

Next.js 15的App Router默认静态缓存页面组件，即使数据更新，组件仍可能复用缓存版本。在page组件底部添加配置，强制页面每次请求都重新生成：

// 放在page组件导出语句前
export const dynamic = 'force-dynamic';

3. 解决客户端路由缓存问题 #

使用Link组件跳转时，Next.js会缓存目标页面，导致内容不更新。给Link添加reload属性，强制跳转时重新加载页面：

<Link href={`/${post.id}`} reload>{post.title}</Link>

4. 可选：手动触发增量静态再生（ISR） #

如果需要兼顾静态页面性能，同时在内容更新时主动刷新缓存，可以通过API路由调用revalidatePath：
创建app/api/revalidate/route.js：

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

export async function POST(request) {
  const path = request.nextUrl.searchParams.get('path');
  if (!path) {
    return NextResponse.json({ message: '路径参数必填' }, { status: 400 });
  }
  revalidatePath(path);
  return NextResponse.json({ 已刷新缓存: true, 时间: Date.now() });
}

在新增/修改博客后，调用该API（如POST /api/revalidate?path=/）即可触发指定页面的缓存刷新。

内容的提问来源于stack exchange，提问作者Nick Jonas