Next.js Discord

Discord Forum

Data Cache invalidation does not work using fetch API options

Unanswered
Bluethroat posted this in #help-forum
Open in Discord
BluethroatOP
My app is built in Next 13.2.4, the App router and Server components. I pull data from a Strapi app through REST API. When I deploy to Vercel, my data is being cached and won’t revalidate if I set the {next: {revalidate: x seconds}} option inside fetch options

I am able to revalidate the whole route segment (export const revalidate = 60) or I can do no caching with the fetch API ( {cache: "no-store"} )

Otherwise, the data is being cached also between deployments. Is there a known reason that this does not work for people? Or a known issue with devs who just know sth they should know?

2 Replies

BluethroatOP
async function fetchHomePageData () {
  
  const res = await fetch(
    `${BACKEND_URL}/projects?populate=*`, {
      ...fetchOptions, // header Content Type and Authorization
      next: { revalidate: SIXTY_SECONDS }
  });

  return res.json();
}


export default async function HomePage() {

  const data = await fetchHomePageData();

  return (
    <main className="p-2 md:py-8 xl:px-0">

      <h2 className="text-bold text-2xl pt-4">Upcoming Projects</h2>
      <Divider />
      <div className="flex flex-wrap gap-8 justify-center">
        {data.map((item, i) => (
          <ProjectCard key={item.id} project={item} />
        ))}
      </div>

    </main>
  );
}
I the above example, data does definitely not get re-fetched after 60 seconds even with a hard refresh