Caching, Payloads, and Other Dark Arts
summary
Real-world demos show concrete wins: a bloated API starts as five parallel client side requests returning a 1.58 MB payload that becomes 1.58 MB payload to 300 bytes after moving aggregation into a BFF proxy and shaping responses, cutting perceived load from 13.3s to 3s on airplane WiFi. Implementation uses Next.js API handlers, a transformation proxy, and TanStack Query with server prefetching plus timeouts and optional queries for resilient fallbacks, and the rebuilt flow measurably improves reliability and latency.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:14Real-world performance
- 4:51User experience 0.1s
- 7:38Public vs internal vs partner APIs explained
- 10:05Jira ticket flaws
- 12:29First demo 1.58MB
- 16:22BFF pattern optimization
- 18:31Second demo 5s load
- 20:23Bandwidth impact
- 21:47React Query caching
- 24:34Server-side rendering with timeouts and UI recovery
- 28:08Third demo recovery
- 29:10Real-world results
related talks
24mSuperpowers of browser's Web API
21mHigh Performance APIs through Caching
23mMicro-Frontends Performance and Centralised Data Caching
37mCaching Deep Dive: The Ultimate Way To Speed up Your GraphQL API
28mDecoding JavaScript: Loading Performance —
37mSecret Shortcuts of Loading Web Performance
28mOptimizations You Should Have Implemented Yesterday
22mFrom 3000ms to 300ms: Lessons learned from optimizing Tanstack ...