Data Fetching Done Right
summary
Describes moving initial data fetching out of lazy page chunks so assets and data download in parallel, using a custom Babel plugin that extracts pure client fetcher functions into a separate bundle, and tying those fetchers to predictive prefetch hooks with controllable low priority so prefetching does not overload backend. Provides a server counterpart that serializes route initial data to avoid double fetch on hydration. Implements demos on slow 3G showing near-instant navigation and ships as an npm beta @tata1mg/router.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:23Types of data fetching
- 2:26Fetch before render
- 3:51Render then fetch
- 4:52Render as you fetch
- 5:56Performance criteria
- 7:51Navigation process
- 10:04Parallelizing fetches
- 11:57Client fetcher implementation
- 14:13Existing useEffect approach
- 16:01Separating data fetching
- 16:42Prefetching data and assets
- 17:27Prefetch control
- 20:08Client-side navigation
- 20:29Server-side rendering
- 21:53Avoiding duplicate fetches
- 24:04Package and conclusion
related talks
27mWhen To Fetch: Remixing React Router
21mSimplifying Data Fetching in Vue with Data Loaders
43mFast Backends for Faster Frontends
23mHandling Data at Scale for React Developers
17mBe lazy, but with strategy
29mSolving Real World Data Fetching Challenges: A Pragmatic Case Study
25mData Fetching Strategies with React Server Components
43mRoute Recalculating