Caching Data in Memory with Remix Client Loaders

Learn how to improve your user's experience and websites performance by caching data in memory on the client using clientLoader
Play with this demo 👉 remix-movies.pages.dev/
Checkout the code 👉 github.com/remix-run/example-...
00:00 - Problem explained
01:21 - Setting up a clientLoader
02:44 - Adding a client-side cache
05:54 - Bug with the initial request
06:40 - Enabling clientLoader during hydration
08:10 - Improved experience with a client cache
Learn more at remix.run

[@HerrSiering]

I’m SO here for all the tangents! 😅

[@dustincarr6665]

This answered so many questions for me. Can't wait for the next one.

[@natenatters]

Ryan this whole series is great! I like how its general problems, but I can see how I would use this in a variety of places. Even interesting to see your coding style :) Thanks!

I really enjoy Ryan judging the movies 😂

[@codewithnws3544]

I love remix

[@omarcardenas3728]

Nice video

[@adiadiadi]

I couldn't figure out how to debug Remix with Chrome as it abstracts away access to the node binary and hence ignores the --inspect flags. But I notice you have debugging enabled. How did you do it?!

[@tomino133]

Damn. Dark mode Ryan.

[@JamesCoates-yl7le]

Cheers Ryan, How would you go about clearing cache ?

[@TEMISsX]

cool stuff

[@user-iu6iw8en8h]

Does this work with the Vite compiler? In my case cache is only defined at the server loader

[@FzsHotDogInDonut]

I know this is out of scope topic. But I need help, I was trying to build a rich text editor with plate js. I only found one video talking about it. But they use js so it worked. But as I was using ts after installing everything it gave an error. code: 'ERR_IMPORT_ASSERTION_TYPE_MISSING' ( post code #2884, if you can please view this discussion). I can't figure out how to remove this. As this is in the node module.

[@lucasgiunta8874]

It this cache work between multiple tab for the same user ?

[@brianmwangi6599]

Can you accomplish the same using cache-control headers?

[@RogerStudner]

I know this meant to be a simple example - but what if a child route updated some server state -- how could one "clear or invalidate this cache"?

[@everdimension]

Awesome feature!
This really begs for an infinite list example! How would that work?

[@rushikeshbelkunde9533]

Please make a video about deleting, updating using optimistic behaviour

[@user-ut4uk9mm8c]

Would be great to have some examples with Hydrogen. Not only Remix.

[@nhieljeff2156]

where does "let cache" live? in client?

[@nadico5740]

Seems like its client side because there are no further requests to the server,
Is the cache available for both the client and the server? maybe, I also want to know

[@DrewLytle]

"The hiccups man" 😆

[@Akshaythakur17]

What Vscode theme and font is that

[@pokedotdev]

github theme

[@user-ks5to4bo3l]

should have said its for remix V2... could have saved me some time

[@ray-lee]

where is the videos of trellix😮

[@Remix-Run]

ruclips.net/p/PLXoynULbYuED9b2k5LS44v9TQjfXifwNu

[@alfonsoalejandroespinosade1728]

twilight devs please cancel this

[@sambeauJonez]

All your kids have a friend named 'cache'. Are you sure they're the same kid?

[@RyanFlorence]

Dunno, it's hard to invalidate!