Composition, Caching, and Architecture in modern
summary
A demo e-commerce app gets refactored end to end to show that Next.js 16’s use cache directive and cache components let pages be partly pre-rendered so most UI ships statically while only tiny user-specific pieces stream at request time. The build replaces excess client fetches with server components, uses the donut pattern to keep interactive wrappers thin, and moves data fetching down the tree. Result: far fewer dynamic pages, much less client JS, faster navigations and improved Lighthouse-like scores via partial pre-rendering.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 0:28Static vs dynamic rendering
- 2:07RSC and use cache
- 3:49Codebase demo overview
- 7:02Fixing prop drilling
- 10:30The donut pattern
- 15:07Implementing use cache
- 20:07Caching dynamic routes
- 26:23Summary and conclusions
related talks
45mNext js: Build a State of the Art E commerce in Fullstack React
23mMicro-Frontends Performance and Centralised Data Caching
16mHigh-speed personalization with Next.js
31mRethinking composable E-Commerce Frontends
31mReact Server Components Elevating Speed, Interactivity, and User Experience
21mImplementation and use cases of modern rendering patterns
41mLow-budget JavaScript: composable frontends that are fun and friendly
15mDon't Go South With Next.js Caching – Supercharging Performance