NextJS 生产不刷新数据

Question

• 当我刷新本地主机页面时，可以看到新添加到数据库的数据
• 当我刷新生产页面时，数据未更新（部署时相同）

我无法找出为什么数据没有在生产中重新加载。使用NextJS APP文件夹、Prisma、部署投掷Vercel、Planetscale作为数据库。看起来网络是缓存的。如何让它发挥作用？

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

async function getFighters() {
    const fighters = await prisma.fighter.findMany({
        where: {
            fightBlue: null,
            fightRed: null
        }
    });
   
    return fighters;
}

async function UsersPage() {     
    const fighters = await getFighters()

    return (...);
}

export default UsersPage;

更新： 添加

export const dynamic = 'force-dynamic'

有助于在刷新页面（F5）时重新加载数据。当我单击导航栏中的链接时，它不会重新加载数据。在这种情况下我应该使用像 Redux 这样的阶段管理库吗？

Answer 1

我最近也遇到了类似的问题。

Next.js 默认情况下静态渲染每个路由，要克服这种行为，您需要显式声明该组件为动态组件

export const dynamic = 'force-dynamic'

这可确保组件始终在收到请求时动态呈现，这意味着 Prisma 调用应再次运行，每次刷新时都会获取新数据。

Answer 2

尝试 revalidatePath 并验证 next.js 的参数 这是示例项目的示例

import { revalidatePath } from "next/cache";

const baseURL = process.env.BASE_URL

async function getArticles() {
  try {
  const response = await fetch(`${baseURL}home`, {
    next: {
      revalidate: 0,
    },
  });
  const path = baseURL + 'home'
  revalidatePath(path)
  return response.json();
  } catch (error) {
    console.log(error)
  }
}

如果要缓存数据，您可能需要将验证值设置为 n 秒。将其设置为零意味着选择退出缓存。