为什么我的 Next.js 页面在构建过程中会生成包含旧数据的静态文件？

Question

我正在开发一个 Next.js 项目，我在应用程序目录中使用 Prisma 从数据库中获取成绩。获取的数据使用

GradesComponent

显示。但是，当我运行

npm run build

时，页面会生成静态文件，其中包含构建时数据库中的数据。对数据库的任何后续更改都不会反映在页面上。

相关代码如下：

app/page.tsx

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

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

app/Grades.tsx

import { Grades } from "@prisma/client";

export const GradesComponent = ({ grades }: { grades: Grades[] | null }) => {
  return (
    <div>
      <h1>Grades</h1>
      {grades?.map((grade) => (
        <div key={grade.id}>
          <h2>{grade.title}</h2>
          <p>{grade.grade}</p>
        </div>
      ))}
    </div>
  );
};

actions/getGrades.ts

import { db } from "@/lib/db";

export const getGrades = async () => {
  try {
    const grades = await db.grades.findMany();
    console.log(grades);
    return grades;
  } catch (e) {
    console.error(e);
    return null;
  }
};

我希望页面在每次请求时从数据库中获取最新数据，而不仅仅是在构建过程中。如何使用 Next.js、Prisma 和 App Router 实现这一目标？

注意

当我运行 npm run dev 时，一切正常。刷新后数据会更新，反映数据库的最新更改。

Answer 1

您尝试过重新验证吗？ 导出常量重新验证= 60； 将其添加到您的布局或 template.js 中