I wouldnt mind that much,

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.

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 ....

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