Wait for ISR Revalidation (rather than showing stale data)
Hey guys! I had a quick question about using ISR in Next.js (app router) with Vercel. As outlined by the Next.js docs, these are the steps taken when using ISR:
1. When a request is made to the route that was statically rendered at build time, it will initially show the cached data.
2. Any requests to the route after the initial request and before 60 seconds are also cached and instantaneous.
3. After the 60-second window, the next request will still show the cached (stale) data.
4. Next.js will trigger a regeneration of the data in the background.
5. Once the route generates successfully, Next.js will invalidate the cache and show the updated route. If the background regeneration fails, the old data would still be unaltered.
My question is about step 4, as shown above. Is it possible to have a new request that comes in after the ISR interval to wait for the new page to be generated before showing a response? I'd much rather show the user a loading page (or even just a long request time) for a second and then the correct data, rather than with incorrect data immediately. For example, a weather app might want to take this tradeoff instead of serving out-of-date weather data for a user that happens to visit after there haven't been that many users.
If this is too advanced for ISR on Vercel, what other solutions should I look at? I'm trying to keep complexity fairly low, but would I have to end up setting the page to dynamic and using my own caching solution?
Thanks in advance :)
4 Replies
just dont cache it,have the loading while the request is being fetched on page load
That’s what I ended up doing in the short term, but there are still situations where you might still want to cache a value, such as if you’re accessing a rate limited API
Use redis ,after a value is fetched ,cache it everytime for a certain amount of time or local storage if its not that much data.
If you’re using fetch to get the data, you can just tell next to cache the fetch call instead of caching the whole page