Next.js构建生成含旧数据的静态文件，如何实现每次请求拉取最新数据？

问题分析 #

在Next.js App Router中，页面组件默认采用**静态生成（SSG）**策略。执行npm run build时，页面中的异步数据获取逻辑会在构建阶段一次性执行，生成静态HTML文件。后续数据库更新后，静态文件不会自动同步，导致页面无法展示最新数据。而开发模式（npm run dev）下，Next.js默认启用动态渲染，每次请求都会重新执行数据获取逻辑，因此能看到最新数据。

解决方案 #

要实现每次请求都从数据库拉取最新数据，只需强制页面采用动态渲染策略，以下是两种常用实现方式：

方式一：添加dynamic指令（推荐） #

在app/page.tsx顶部添加export const dynamic = 'force-dynamic';，强制Next.js在每次请求时重新渲染页面并执行数据获取逻辑：

修改后的app/page.tsx代码：

import { getGrades } from "@/actions/getGrades";
import { GradesComponent } from "./Grades";

// 强制动态渲染，每次请求都重新获取最新数据
export const dynamic = 'force-dynamic';

export default async function Home() {
  const grades = await getGrades();
  return (
    <div>
      <h1>Grades</h1>
      <p>Grades will be displayed</p>
      <GradesComponent grades={grades} />
    </div>
  );
}

方式二：使用增量静态再生（ISR）（按需刷新） #

如果希望页面兼顾性能与数据新鲜度，可以设置revalidate属性，让页面在缓存过期后自动重新获取最新数据（单位：秒）：

import { getGrades } from "@/actions/getGrades";
import { GradesComponent } from "./Grades";

// 每60秒重新生成页面，同步最新数据库数据
export const revalidate = 60;

export default async function Home() {
  const grades = await getGrades();
  return (
    <div>
      <h1>Grades</h1>
      <p>Grades will be displayed</p>
      <GradesComponent grades={grades} />
    </div>
  );
}

补充说明 #

• dynamic: 'force-dynamic'等价于旧版的getServerSideProps，完全禁用静态缓存，确保每次请求都实时获取数据。
• revalidate适合数据更新频率不高的场景，既能利用缓存提升性能，又能保证数据不会长期过时。
• 你的Prisma查询逻辑（getGrades函数）无需修改，已经正确实现了数据库数据的读取。

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