others / www.youtube.com2024-09-09
Everything YOU need to KNOW about Remix loaders
Today we go over how loaders inside of React Router v7 / Remix.run work. How you can cache loaders, how you can optimize them, where and how they re-trigger, 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: https://twitter.com/AlemTuzlak
GitHub: https://github.com/AlemTuzlak
Company Github: https://github.com/forge42dev
⏱️ Timestamps:
00:56 - What are loaders exactly?
04:19 - Single fetch approach with loaders
07:40 - What can you return from loaders
08:32 - Successful responses
08:50 - Thrown responses
09:25 - Error responses
09:54 - Streaming the data
11:53 - Streaming the data with single fetch
13:28 - When do loaders re-fire
13:43 - re-fire on action submission
14:40 - re-fire on param change
15:56 - re-fire on search param change
16:37 - re-fire on useRevalidate trigger
17:04 - re-fire on navigation to the same page
18:02 - how to stop loader re-triggers
20:14 - Practical examples
23:29 - Defering slow requests
25:56 - Using server caching for faster response times
28:25 - Caching with headers
30:25 - Using shouldRevalidate
32:44 - clientLoader caching (with remix-client-cache)
32:59 - Defer with single fetch
🔖 Tags:
Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial
