Data Fetching Unleashed: Next.js, React Query and their BFF
summary
Builds a dashboard for the top 5,000 users by issuing five parallel requests to an API limited to 1,000 users per call, then shows how a Next.js API BFF proxy aggregates, trims and maps server data so the client receives only the needed fields. Adds React Query (TanStack) for caching, retries and hydration, demonstrating a real case where the original responses were 2.3 MB payload with 73% unused data and a proxy plus caching yields a demo 99.9% payload reduction and faster renders.
AI-written summary · about
chapters (7)
- 0:00Data fetching challenges
- 3:16Performance in user experience
- 7:14Birthday chart scenario
- 13:42Backend for Frontend pattern
- 17:34React Query state management
- 20:44Next.js server-side prefetching
- 25:00Summary
related talks
44mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: Case Study
29mSolving Real World Data Fetching Challenges: A Pragmatic Case Study
45mSolving Real-World Data Fetching Challenges with Next.js and TanStack Query: A Pragmatic Case Study
11mSimple data fetching with React Query
21mData Fetching with React Query A Crash Course
25mReact Query Under the Hood
30mOvercoming N+1 API Calls in React: Strategies for Efficient Data Fetching
23mMicro-Frontends Performance and Centralised Data Caching