Chapter 2 of 7 · 6 practices · 4 min · 4-question quiz
Caching with Cache Components
Next.js 16 replaced implicit caching with an explicit, opt-in model. This chapter shows how to turn it on, what to cache, and how to refresh it.
Start: Turn on Cache Components and Partial Prefetching6 practices in this chapter
- 1Turn on Cache Components and Partial PrefetchingCache Components is the current Next.js programming model, and from Next.js 16.4 the team recommends it for every app. In this model nothing is cached unless you say so, and every route gets a static…
- 2Cache data and UI with use cache and always set a cacheLifeCaching is now opt in, so you decide what is reused and for how long. Add the
'use cache'directive at the top of an async function or component to cache its result. Arguments and captured values… - 3Refresh cached data with updateTag or revalidateTag after a writeCached data is only useful if it refreshes when the source changes. Tag it with
cacheTag, then invalidate the tag after a mutation. - 4Wrap uncached and request-time data in SuspenseSome data must be fresh on every request, and that should not hold up the rest of the page. Data like this, and components that read
cookies(),headers(),searchParamsor dynamicparams… - 5Call connection() before per-request random values and timestampsA prerender runs once, so any random value or timestamp it computes would be frozen for every visitor. Under Cache Components,
Math.random(),Date.now()andcrypto.randomUUID()therefore need… - 6Lock marketing and blog routes static with ensureStaticOne dynamic component added by mistake can turn a fully static page into one that renders on every request, which costs server time and money. Next.js 16.4 adds the
ensureStaticroute segment…
Check yourself on this chapter
4 questions, right here once you are signed in. Your progress is saved as you read.