Vercel 正在缓存我不想缓存的数据

Question

我正在尝试开展我的一个个人项目，并且正在将 NextJS 14 与 Vercel 结合使用。在开发过程中，该网站按预期运行。在生产中，仅在部署时获取数据。在我进行新部署或重新部署之前，数据不会更新。

我的网站的工作原理是显示学校当前的时间表，例如所有课程的开始和结束时间。每次有人打开它时，它都应该获取当前日期，然后根据该日期显示时间表。第二天，它显示的是前一天的时间表，我需要重新部署它才能显示当天的时间表，这真的很烦人。

唯一被缓存的东西似乎是日期，因为除了日期之外，平台的其余部分都可以工作。它仍然显示当天正确的上课时间。

我从不使用 fetch 来获取日期，只是在不同的文件中使用 luxon，所以我不知道如何遵循文档。

将文件代码放在这里太难了，因为我不知道文件在哪里搞乱了，所以这里是 GitHub 存储库：https://github.com/grantgarbe/schoolprogress

我刚刚开始使用 NextJS，之前只使用基本的expressJS。我感谢所有帮助，谢谢！

我尝试从 NextJS 文档中添加重新验证变量，但它不起作用。

我希望它在日期更改或刷新页面时显示当前日期。

我仍然希望我的项目对用户来说速度更快。我知道缓存很重要，我想以最好的方式解决这个问题。

Answer 1

你几乎已经拥有它了。我看到你在

export const revalidate = 0;

中有

Multiple.tsx

来使页面动态化，但是这是行不通的，原因是因为 route 段配置 仅在页面、布局或路由处理程序中有效，并且因为

 Multiple.tsx

是一个组件

export const revalidate = 0;

基本上被忽略。最快的解决方案是将其移至

page.tsx

，这将使您的页面变得动态。

import Navbar from './components/Navbar';
import Sidebar from './components/Sidebar';
import Multiple from './components/Views/Multiple';
// import Single from "./components/Views/Single";

export const revalidate = 0; //Make page dynamic

export default function Home() {
  return (
    <>
      <div className="fixed top-0 left-0 w-3/4 h-screen overflow-auto p-4">
        <Navbar />
        <Multiple />
      </div>
      <div className="fixed top-0 right-0 w-1/4 h-screen grid grid-cols-1 grid-rows-4 gap-4 p-4 [&>*]:p-4 [&>*]:flex [&>*]:justify-center [&>*]:items-center [&>*]:text-center [&>*]:bg-base-200 [&>*]:rounded-lg">
        <Sidebar />
      </div>
    </>
  );
}

更好的解决方案是让页面保持静态，每 24 小时重新验证一次。

export const revalidate = 60 * 60 * 24; //revalidate once in a day

这样您就不必在每个请求上渲染页面，从而提高性能。此解决方案需要注意的是，重新验证将在上次部署后 24 小时内进行，因此，如果您上次部署是在上午 10:10，则该页面将保持缓存状态，直到第二天上午 10:10。

另一个更好的解决方案是设置一个 cron 作业，在每天的固定时间（例如上午 12:00）重新验证路径 (

revalidatePath('/'

)。希望这有帮助。