Cache revalidation pattern (load cache / update as soon as data is revalidated)
Unanswered
Harlequin Duck posted this in #help-forum
Harlequin DuckOP
I have a very slow fetch request that gets executed in the server render process.
So my user looks on the loading screen for a long time.
I would like to cache this request, to have a faster initial load for my page.
However, it is somewhat important that my user actually gets the freshest data.
So what i would like to do is to use cached data on my server side rendering, but in there also initiate a full new fetch request.
The user then gets the cached data at first, but as soon as the fresh fetch is ready the data gets updated.
Are there any good patterns to do so?
I tried:
but this does not automatically update the frontend after revalidation.
So my user looks on the loading screen for a long time.
I would like to cache this request, to have a faster initial load for my page.
However, it is somewhat important that my user actually gets the freshest data.
So what i would like to do is to use cached data on my server side rendering, but in there also initiate a full new fetch request.
The user then gets the cached data at first, but as soon as the fresh fetch is ready the data gets updated.
Are there any good patterns to do so?
I tried:
export const fetchUserReportsCached = unstable_cache(
fetchUserReports,
["user-reports"],
{
revalidate: 1,
},
);but this does not automatically update the frontend after revalidation.
3 Replies
Harlequin DuckOP
Ok when i call
it somewhat works as expected. But what if the fetch takes even longer and
Or does
router.refresh() on the client, with the fetch like:export const fetchUserReportsCached = unstable_cache(
fetchUserReports,
["user-reports"],
{
revalidate: 1,
},
);it somewhat works as expected. But what if the fetch takes even longer and
router.refresh() revalidates, before the cache from unstable_cache is even updated? Or does
router.refresh() understand that unstable_cache is still revalidating and waits for it to finish?@Harlequin Duck a better way would be, have a server action do the entire data fetching and on it finishing.. revalidate the path you are on with revalidatePath, call this from a useEffect from a client component.
What the server action makes it so is that you don't need to router.refresh()