When To Fetch: Remixing React Router
summary
React Router adds route loaders that initiate fetches before render, returning Responses or fetch calls and exposing results to components via useLoaderData instead of in-component effects. Nested loaders run in parallel, removing spinner waterfalls and cutting full-page render time roughly in half in demos; loaders coexist with React Query or SWR. Server-side deferred streaming sends initial HTML then streams data chunks so critical assets and a prioritized resource (demo uses awaited Pokemon) render immediately, improving LCP/TTI. Links support prefetch=“intent” to warm caches.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:04React Router History
- 1:43The Status Quo of Data
- 3:29Using React Query
- 4:15Understanding Suspense
- 6:11React 18 and RSC
- 7:56React Router Loaders
- 9:31Nested Routing Concepts
- 11:43Combining Tools
- 13:23Mutations and Performance
- 15:20Server-Side Data Loading
- 17:06Caching and Transitions
- 18:30Prefetching Techniques
- 20:04Streaming Explained
- 22:54Streaming Demo and Conclusion
related talks
25mData Fetching Done Right
25mData Fetching Strategies with React Server Components
23mHandling Data at Scale for React Developers
19mTake a load off with React
43mFast Backends for Faster Frontends
43mRoute Recalculating
21mSimplifying Data Fetching in Vue with Data Loaders
55mUse the Platform With Framework Agnostic Routing