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