Vercel is caching data I don't want cached

I'm trying to work on one of my personal projects, and I'm using NextJS 14 with Vercel. In development, the website works as expected. In production, data is only fetched on deployment. The data won't update until I make a new deployment, or redeploy.

How my website works is it shows the current schedule for school, such as when all classes start and end. Every time someone opens it, it should get the current date, then show the schedule based on that. On the next day, it's showing the schedule for the day before, and I need to redeploy for it to show the current day, which it really annoying.

The only thing that seems that is being cached is the date, because the rest of the platform works except for the date. It still shows the correct class periods for that day.

I'm never using fetch to get the date, just luxon in a different file, so I don't know how to follow the documentation.

It would be too hard to put the code in here for the files, as I don't know where the file is messed up, so here's the GitHub repo: https://github.com/grantgarbe/schoolprogress

I just started using NextJS, and I was previously using just basic expressJS. I appreciate all help, thank you!

I tried adding revalidate variables from the NextJS documentation, but it's not working.

I'm expecting for it to show the current date when the date changes, or when you refresh the page.

I still want my project to be fast for users. I know cache is important, and I want to fix this the best way possible.

You almost had it. I see that you have export const revalidate = 0; in Multiple.tsx to make the page dynamic, however this is not going to work, the reason is because a route segment config is only valid in a page, layout or route handler and since Multiple.tsx is a component export const revalidate = 0; is basically ignored. The fastest solution would be to move it to page.tsx wich will make your page dynamic.

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>
    </>
  );
}

A better solution would be not to make your page fully dynamic and revalidate every 24h instead.

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

That way you don't have to render the page on each request and is more performant. A caveat with this solution is that the revalidate will be 24h since the last deployment, so if your last deployment was at 10:10 AM the page will remain cached until 10:10 AM of the next day.

Another and better solution would be to set a cron job that revalidates the path (revalidatePath('/') at a fixed time everyday, say 12:00 AM. Hope this helps.