A model of "use cache", revalidateTag and updateTag
A plain-JavaScript model of the behaviour described in the Next.js 16 docs, not Next.js itself. The second read hits the cache; after revalidateTag one visitor still sees ₹100 while ₹120 loads; after updateTag the very next read waits and gets ₹150.
In Next.js 16 server components await their data directly; with Cache Components enabled you cache functions or components with "use cache", set lifetimes with cacheLife, tag them with cacheTag and refresh them with revalidateTag, updateTag or revalidatePath, while request-time data streams behind <Suspense>, so one route can be part static, part dynamic.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a cached getCategory(slug) that lasts a day and can be refreshed by the tag categories.
A product page shows product details (same for everyone) and "Recently viewed" (from a cookie). Write the page so the details are in the static shell.
Explain it without notes
How do you fetch data in a Next.js server component, and how do you avoid waterfalls?
What makes part of a route dynamic, and how does Cache Components handle it?
Explain "use cache", cacheLife and cacheTag. What is part of the cache key?
Compare revalidateTag, updateTag and revalidatePath.
Preview
Console
Nothing logged yet.Expected console output
pen: ₹100 | db reads: 1
pen: ₹100 | db reads: 1
pen: ₹100 (stale, refreshing)
pen: ₹120 | db reads: 2
pen: ₹150 (read-your-own-writes) | db reads: 3