NextJS is not caching database query in server components

166 Views Asked by At

I have a database query:

// fetchGames.ts
import { db, games } from "@/db/schema";
import { cache } from "react";

// const revalidate = false; // this does not change the behavior of caching

export default cache(async () => {
  return db.select().from(games).orderBy(games.name);
});

That I call in a server component

...

export default async function Home(props: { params: { locale: string } }) {
  const events = await fetchEvents();

  const games = await fetchGames();

  const projects = await fetchProjects();

  const isMobile = headers().get("x-device-type") === "mobile";

  return ( ... );
}

The NextJS docs for revalidation state:

false: (default) The default heuristic to cache any fetch requests that set their cache
option to 'force-cache' or are discovered before a dynamic function is used. Semantically 
equivalent to revalidate: Infinity which effectively means the resource should be cached 
indefinitely. It is still possible for individual fetch requests to use cache: 'no-store' or
revalidate: 0 to avoid being cached and make the route dynamically rendered. Or set 
revalidate to a positive number lower than the route default to increase the revalidation 
frequency of a route.

When I deploy my app I would expect this query to happen once when its deployed and never again regardless how many requests come in. However, this code is treated like a dynamic route and is queried on every request. I know this because when I update the content in the database and refresh the production deployment the content is immediately reflected on the page. This is causing unnecessary usage on my backend and I can't figure out why its happening.

Note:

  • I am not making any route "force-dynamic"
  • Specifying revalidate = 0, false, or Infinity does not change the caching behavior
0

There are 0 best solutions below