Next.js Discord

Discord Forum

Will unstable_cache revalidation cause it to wait for the function to re-run?

Answered
American Shorthair posted this in #help-forum
Open in Discord
American ShorthairOP
So, lets say I try to load a page, the page uses a component that uses unstable_cache, the unstable_cachce is over its revalidation time, so it runs the function.

But lets say the function takes a long time to run, will the page have to wait for it to finish to load? Or would it just load what was in the cache before and then run the function for next time?

Thanks.
Answered by joulev
by default it won't wait but will use the existing (stale) cache, while running the function in the background.

but unstable_cache is powerful enough that you can make it wait for the function to rerun
import { unstable_cache } from "next/cache";

async function getData() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return new Date().toISOString();
}

const revalidate = 10;
function getUniqueKey() {
  return Math.floor(new Date().valueOf() / (revalidate * 1000)).toString();
}

async function cachedGetData() {
  return unstable_cache(getData, [getUniqueKey()])();
}

export default async function Page() {
  const data = await cachedGetData();
  return <div>{data}</div>;
}
View full answer

7 Replies

American ShorthairOP
The documentation would seem to indicate you will always pull cached data unless there's nothing in the cache, so once it gets the initial cache should never take a long time to load. but it isn't very specific so I just want to make sure
@American Shorthair So, lets say I try to load a page, the page uses a component that uses unstable_cache, the unstable_cachce is over its revalidation time, so it runs the function. But lets say the function takes a long time to run, will the page have to wait for it to finish to load? Or would it just load what was in the cache before and then run the function for next time? Thanks.
joulev
by default it won't wait but will use the existing (stale) cache, while running the function in the background.

but unstable_cache is powerful enough that you can make it wait for the function to rerun
import { unstable_cache } from "next/cache";

async function getData() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return new Date().toISOString();
}

const revalidate = 10;
function getUniqueKey() {
  return Math.floor(new Date().valueOf() / (revalidate * 1000)).toString();
}

async function cachedGetData() {
  return unstable_cache(getData, [getUniqueKey()])();
}

export default async function Page() {
  const data = await cachedGetData();
  return <div>{data}</div>;
}
Answer
American ShorthairOP
thanks
const getCachedMapData = (filePath: string) =>
    unstable_cache(
      async (filePath: string) => {
        const mapData = await processMapData(filePath);
        return {
            compressedVolume : Array.from(mapData.compressedVolume),
            dims : mapData.dims
        };
      },
      [],
      { revalidate: 120, tags: [`voxel_${filePath}`] },
)(filePath);


is there something I am doing wrong here?
I also am noticing a pretty massive issue with unstable_cache, when the cache is stale and multiple people load the page while its stale... it runs the function multiple times for each... which is really not desired when putting computationally expensive functions behind it.
American ShorthairOP
Decided unstable_cache (and these problems are likely going to carry over to 'use cache') is going to have too many problems and limitations so I am just implementing my own cache.
https://nextjs-forum.com/post/1334359752465191022#message-1334413678706954301

No worries.