Next.js 在生产中禁用服务器功能的缓存

Question

在 next.js 14 中，我有一个页面使用默认的服务器端渲染 (SSR) 来获取一些数据并将其传递到其客户端组件。

export default async function Page() {
  const magazines = await getMagazines(true);

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      <ContextProvider>
        <Header />
        <Content magazines={magazines} />
      </ContextProvider>
    </Box>
  );
}

getMagazines 函数也运行在服务器上，并使用 prisma 从数据库加载杂志。

export async function getMagazines(
  includeUnpublished: boolean = false
): Promise<Magazine[] | null> {
  const magazines = await prisma.magazine.findMany({
    where: includeUnpublished ? {} : { isPublished: true },
    orderBy: [
      {
        year: "desc",
      },
      {
        number: "desc",
      },
    ],
  });

  return magazines || null;
}

这对于本地开发非常有效。然而，在我的生产环境中删除杂志时，它仍然会显示所有杂志，直到几个小时后。

我怀疑 next.js 使用本文中描述的缓存行为之一：https://nextjs.org/docs/app/building-your-application/caching但我无法弄清楚要在此处禁用哪一个。 .

Answer 1

您可以使用

revalidatePath

重新验证该特定页面。本质上，

revalidatePath

允许您按需清除特定路径的缓存数据。

假设您想要重新验证杂志页面的数据缓存，您可以这样做

revalidatePath('/magazines')

。通过这样做，当用户在重新验证后访问该页面时，它将重新验证或重新获取数据。

但请确保将

revalidatePath()

放入删除杂志的代码中，因为仅当您更改杂志数据时（在您删除杂志的情况下），您才希望使缓存无效。

所以基本上你的代码可能是这样的：

import { revalidatePath } from 'next/cache'

export async function deleteMagazine( magazineId : string) {
  try {
    // do your prisma magic here and delete that magazine
    // after that revalidate that path and tell nextjs to refetch the data again
    revalidatePath('/magazines')
  }
  catch (e) {
    // handle any errors if there are any
  }
}

但请记住

revalidatePath

仅在下次访问包含的路径时使缓存无效。

revalidatePath

API 参考