Using cached useLoaderData from previous request.

[chadmmills]

Hello! Question around navigation and revisiting existing routes with data loaders… apologies if this has already been mentioned / addressed somewhere.

If I have these two pages/routes - route-a.js & route-b.js and route-a has a loader function. If a user lands on route-a, receives the data from the loader, navigates to route-b and then back to route-a it seems that remix still waits for the route-a loader to run and return a response before re-rendering the route-a component. Is there any mechanism for showing the original cached loader data first, while fetching “fresh” data in the background? I’m thinking something along the lines of react-query where if a route (query key in their case) is already in the cache, to show that data first while still triggering a network request in the background.

[sergiodxa]

You can use the Cache-Control header on the response of the route-a loader to cache it in the user browser or a CDN, you can use this header doing stale while revalidate too (SWR name came from the header actually), so the CDN will return cached data and revalidate in the backend, next time someone request the data it will be updated (and it will be revalidated again).

Combine that with something like useRevalidate to trigger a revalidation of the loaders a second after the page load and the data will update.

[chadmmills]

I see, thanks for the suggestion. So not something built-in but definitely available to implement. Thanks!

[matmilbury]

Yes! Just #usetheplatform 🙂