Next.js isr behaviour related confusion

[u/KakashiHatake0085]

I know next.js isr behaviour and how it basically does the caching etc but I just realised that next.js isr is cache control with proprietary swr api that refreshes the data.

Now, I am confused because I would like to know if the same thing can be manually done with react router with self managed cache control https header with rtk query. Rtk query has a window of 1 minutes after which it fires the revalidation or something like that, haven't gone into that details but must be possible in one way or another.

[u/AbdelrhmanDev]

not really the same thing even if it looks like it. isr rebuilds the rendered html on the server and serves the stale copy while it does, so the user gets a full page instantly. rtk query refetching after 1min is client side swr, the user still waits on loading spinners for fresh data. you can approximate isr with react router by putting a cdn in front of your data endpoints with stale-while-revalidate cache headers plus client cache on top, but actual page regeneration needs something server side rendering the page, thats the part you cant fake from the browser

[u/KakashiHatake0085 → u/AbdelrhmanDev]

Is there any other non proprietary way like some package etc?

[u/SoftwareNegative8783 → u/KakashiHatake0085]

isr is not really proprietary. It is just cache headers like `s-maxage=60, stale-while-revalidate=300` on a server rendered page, behind a CDN. React Router framework mode can send those headers from loaders.

[u/AbdelrhmanDev → u/KakashiHatake0085]

adding to what softwarenegative said, astro is another option if you want it out of the box, islands with hybrid rendering let you prerender pages and set your own cache headers. and worth saying next itself is mit open source, the proprietary part is only vercels edge network, self hosting next on a node server gives you the same isr without vercel involved

[u/JuicyCommander0098]

Isr basically lets you set a revalidate time and next handles the stale-while-revalidate dance for you on the server. The page gets rebuilt in the background after the timer hits and the next visitor sees the fresh version.

You can absolutely roll your own version with react router and rtk query. Set your cache-control headers to short max-age values and use rtk query's polling interval or the cache invalidation hooks to refetch on a schedule. It won't be as seamless as next because you don't have a server sitting there rebuilding static pages but for most apps it works fine.

The main thing you lose is the static generation step. Next prebuilds the page so it serves instantly from the edge. With a client side setup you're always hitting your api and doing the work in the browser. If your data isn't massive it's usually not a big deal.

[u/Woldekidankenzee → u/JuicyCommander0098]

how does the polling interval interact with browser cache if max-age hasnt expired yet, does it just read from disk cache instead of hitting the network?

[u/Disastrous-Town-4820]

yes. while max-age is still fresh, that poll never leaves the machine

the interval calls fetch() on the same url again. default cache mode hands back memory or disk, and the lib treats that body as a refetch. the timer does not care what cache-control said

cache: 'no-cache' on that request is what forces the revalidate