EVERYTHING you need to know about client loaders (ft. react-query)
Today we go over how clientLoaders inside of React Router v7 / Remix.run work. How you can cache with clientLoaders, how you can optimize them, where and how they trigger, how you can use SWR cache, normal cache, how you can use cache adapters and remix-client-cache and even how you can use an adapter with TanStack query cache with remix-client-cache, and by the end of this video you will be ready to use them for any situation that might come up.
👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together.
📌 Stay Connected:
Twitter: / alemtuzlak
GitHub: https://github.com/AlemTuzlak
Company Github: https://github.com/forge-42
⏱️ Timestamps:
00:00 - Intro
00:21 - Client loaders intro
01:06 - naming conventions
02:16 - how do clientLoaders work
03:01 - hydrate set to false behavior
05:25 - hydrate set to true behavior
07:21 - HydrationFallback
10:04 - intro to pratical portion with examples
10:43 - clientLoader + hydration=false
11:48 - clientLoader + hydration=true
12:15 - setting up a slow loader for caching
13:06 - syncing loaders with clientLoaders
14:15 - going through clientLoader behavior
16:16 - creating a cache with clientLoaders simple example
18:29 - clientLoader browser APIs
19:00 - caching with localStorage
19:28 - SWR caching with remix-client-cache
21:27 - Caching with TanStack Query
26:42 - Overview and outro
🔖 Tags:
Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial