TTC
Theo's Typesafe Cultzsrobinson

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 :)
P
peterkyle01•311d ago
just dont cache it,have the loading while the request is being fetched on page load
Z
zsrobinson•310d ago
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
P
peterkyle01•310d ago
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.
B
Brendonovich•310d ago
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
Want results from more Discord servers?
Add your server
More Posts
What about Panda CSS?Hey there! I can't find any talk about using Panda CSS over Tailwind on this Discord. I would like tNextAuth sign in function not working properlyhey, i have nextauth set up with `credentialsProvider` on, i have the following onClick on a button:Fetching only onceso i have an authToken being stored in the local storage and i want to send it in a POST request eacimport mysql into planetscaleHas anyone imported a database from your local pc into planetscale? With regard to the hostname whatPromise.all is not working in transaction in drizzleCan anyone tell me why this transaction is not working in drizzle? it does not throwing any error bshortest import path with eslint + tsconfig.json pathsIs there any way to configure eslint (I am using `eslint-plugin-import` + `eslint-import-resolver-tyGitHub workflow doesnt runI have this PR here which requires the CI to pass but it doesnt run. Do I miss something or have I sgetServerAuthSession returning null in productionI have absolutely no clue how that is happening because I've implemented the same solution in anotheNot able to get the jwt token through cookiesHii all I'm trying to send the jwt token through cookies like first image .. Now I 'm trying to fetcNext api routes stoped working since clerk installedI installed clerk in my app and auth is working as expected. My probles is that all my api routes stDisable batching multiple useQueryI'm using useQuery as below: ``` const CompanyPage: NextPage<{ asxCode: string }> = ({ asxCode }) =>TypeScriptHi guys i am trying to learn TypeScript. Is there any good resources you can suggest besides the doc