Prevent falling back to Suspense on navigation to route with cached data

[spacepolice10]

Hi there,

I want to use "Cache-Control", "max-age=1, stale-while-revalidate=59" to prevent showing blank screen while the data is loading on the route that already has some cached info. Also, I want to evade any possible delays between screen changes, so I want to use the defer. But it seems to me that if you combine mentioned cache-control-header with <Suspense /> the latter will be reset every time you navigate to route with cached data. That means that user will still see skeleton or blank screen and information such as its scroll position will be eliminated. Is there a way to somehow prevent Suspense from resetting on subsequent navigation and show previously cached data without sacrificing defer because awaiting of request produces significant delay event if I have already cached route's data? Or maybe I understand this thing incorrectly and the SWR-data strongly connected to the server so there's no way to make any instant page switches without storing cache inside the browser? I thought that it will behave like in case with max-age header ( return data right from the disk almost immediately ) and then when is new data ready, returned from loader content will be replaced with the fresh response. Should I fight Remix server or it is better to switch to React Query if I want to achieve described behavior?

[sergiodxa]

The Cache-Control is used by the browser to cache the data, not the app, when you go from /a to /b, the data used in /a that's not used also in /b is removed from Remix internal context, so if you go back to /a Remix will need to get the data again.

And while the browser may still have the data cached and send a response faster, the UI will still render the Suspense fallback because the UI change happens even faster.

What you need is to cache the data in your app to avoid the request completely. You can do that using clientLoader, in Remix's YouTube channel, Ryan has a video on how to do that https://youtu.be/fuwm0BBNkRY?si=LFFPmBY6g7CYtsfL

[spacepolice10]

Seems to be logical solution but I wanted to use header, so it'll revalidate data in background and replace stale data with updated while showing something cached. If I skip request client-side the data will not be updated. Probably I have to move all the data to separate storage and not rely on useLoaderData in such case (load something and syncronize with state manager with useEffect)

[CestDiego]

What is the best situation here? Let's say I have a search page with tiles and i want to be able to use viewTransitions back and forth from the item details page and the search page. If we render the fallback each time the viewTrasition will use the skeleton and not the awaited value even if resolves inmediately.