Cross-posted from my blog. The original, with any updates, lives on fabwaseem.com .

Next.js use cache is a directive that marks an async function, component or whole file as cacheable, so its output is stored and reused for matching inputs. It is the core of Cache Components , the caching model that Next.js 16.4 now turns on by default in create-next-app . Add 'use cache' , set a lifetime with cacheLife , label it with cacheTag , and invalidate it with updateTag or revalidateTag .

This guide is written against Next.js 16.4.2 and React 19.3 , the current releases. I scaffolded a fresh app with [email protected] (its generated next.config.ts already contains cacheComponents: true and partialPrefetching: true ), wrote every example below, then type-checked, linted, built and ran it with next start . The build output, headers and timestamps shown are the real ones I got back.…