Cache Components for people who already know Next.js.
A short course on Cache Components in Next.js 16 for engineers fluent in the App Router before it existed. It skips the basics and focuses on what changed, what breaks, and the gotchas, from the inverted default to the redefined prefetch.
One route, three kinds of content
A Cache Components route mixes three kinds of content. The static shell and the cached data commit together at the first paint. The dynamic parts read per request. They stream in behind a skeleton.
- Static
Prerendered at build time. Ships from the edge. No data read.
- Cached
Wrapped in use cache. Reused across requests until it revalidates.
- Dynamic
Read per request. Wrapped in Suspense. Streams in after the shell.
- Deploy #1284 finished
- 2 new comments on your PR
The header and the stats form the shell. The shell commits at once. The per user notifications stream in behind a skeleton.
The lessons
5 lessons · 52 min- L018 min
The default flipped
The App Router default you relied on is inverted: routes are dynamic until you opt into caching. The new model, the static shell, and the configs that now error.
Open lesson - L0212 min
use cache and the migration traps
Migrate off unstable_cache and revalidate. Automatic keys and closure capture, frozen non-determinism, the new revalidateTag signature, and serverless caveats.
Open lesson - L0312 min
Why loading.tsx betrays you
Your loading.tsx and top-level boundaries now block the shell. The two-navigation validation model, the top-level await trap, and how to lock instant nav in.
Open lesson - L0410 min
What prefetch={true} means now
The old full-route prefetch is gone. What a default link warms now, the redefined prefetch={true}, the segment cost ceiling, and the silent regression to watch for.
Open lesson - L0510 min
URL and session data in the shell
Make personalized routes instant: resolve URL data at prefetch time (params needs Suspense even under generateStaticParams) and choose extract-and-pass vs use cache: private.
Open lesson
How to read this course
Predict, then reveal
Each lesson asks you to predict the result before it shows the answer. This builds a correct mental model.
Check yourself
Short questions test the idea you just read. You get an explanation for each answer.
Plain language
The text uses Simplified Technical English. Sentences are short. Terms stay consistent across every lesson.