Persistent Managed Caches with Remix Client Loader

[@sayedhasan4102]

7:42 there's a refresh button to show the latest index db data, it's above the first column :)

[@kellenbusby]

Hey great video, Ryan. A really nice demo of clientLoader. I'll have to play around with this. Do you have any plans to make videos or discuss progressive web apps and Remix?

[@Greybph]

Very cool. Gonna have to rewrite some of my logic using Jotai persistent atoms and implement this pattern with the clientLoader instead.

[@tedogirma]

this is best feature and it fixs all hydration issue
Thanks Rayn also it works with defer mode on clientLoader which is nice 🥂🥂🥂

[@jitujazz123]

Thanks for the great tutorial there. Can we send some data from clientLoader to serverLoader when calling the serverLoader function? My serverLoader returns a few things and I want to cache only a piece of that info and not the complete response. It would work if I could send some flag to the serverLoader to not load data from the DB as the localStorage has that data

[@akshayaurora]

Don't we need to worry about invalidating the client side cache?

[@yanchesky]

Nice series!

[@Callerooo]

Is there some convention when to clear this indexDB? I'm thinking it might become very large if the user clicks on a lot of movies?

[@twitchizle]

I wouldnt mind that much,

[@HerrSiering]

MDN says: "The process by which the browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between browsers." - so my guess would be that the browser takes care of keeping the size in check. And if it then deletes an item because of this, the code falls back to loading it again from the server. And probably another item is removed then? Anyways, nothing to actively care about because the browser takes over that job for you.

[@RoufaYouakeem]

React query in client loader to manage the cache for us?

[@BearD1cky]

3:50 If Ryan had some defer hooks in serverLoader, what would happen? Can't we let clientLoader to save cache to loaclforage?

[@tedogirma]

ya i works fine
Here is simple sample i have got
```
export async function clientLoader ({ serverLoader }: ClientLoaderFunctionArgs) {
const key = 'received'
const cacheData = await localforage.getItem(key)
if (cacheData) return { received: cacheData }
localforage.setItem(key, serverLoader())
return defer({ received: serverLoader() })
}
use trycatch to handle incase if there is issue inside serverLoader
```
And Server Loader is
```
export async function loader () {
return db.received.findMany({
take: 15,
where: {
to: '9153'
}
})
}
```
also use Suspense and Await inside your tsx file i think this what you need ....

[@ceopaludetto]

Probably he need to await the movie aswell, but he checked if has a defer to properly destructure since you cannot destructure a promise
let loaderResult = await serverLoader()
let movie = await loaderResult.movie