Next.js 'use cache' Directive: Complete Guide [2026]

Description

Next.js 16 removed implicit caching entirely. Every page, component, and function now runs dynamically at request time by default, and if you want something cached you explicitly opt in with the 'use cache' directive. This video breaks down the new caching model with real SaaS patterns you can ship. The core change: the old Next.js 14 model cached fetch responses and static pages by default, and developers spent time opting out with 'no-store' and 'dynamic = force-dynamic'. Next.js 16 flips this entirely. Nothing is cached unless you say so. The 'revalidate' export is gone, the 'dynamic' export is deprecated, and the new mental model is opt-in caching scoped to async functions, components, or entire files. Is 'use cache' the same as the old fetch caching? No. 'use cache' is a compiler directive that tells Next.js to precompute and cache the return value of any async function. The compiler automatically generates cache keys from the function's arguments, so you never manage keys manually. Placed at the file level it caches all exports. At the component level it caches a single component. At the function level it caches a specific data fetch. There are three variants of the directive and each behaves differently. 'use cache' uses an in-memory LRU cache shared across all users, perfect for marketing pages and blog posts. 'use cache: remote' uses a remote cache handler that persists across serverless cold starts, which is the right choice for shared runtime data on Vercel. 'use cache: private' is the only variant that can access cookies, headers, and searchParams, and it caches per-user in browser memory for personalized content like dashboards and recommendation feeds. Control cache lifetime with the cacheLife function. Built-in profiles include 'max', 'days', and 'hours'. You can define custom profiles in next.config.ts with three timing properties: stale for how long the client serves a cached value, revalidate for how often the server refreshes it in the background, and expire for the maximum age before the entry is dropped. Tag individual cache entries with cacheTag and invalidate them precisely with revalidateTag from a Server Action, which beats flushing entire paths with revalidatePath. Key takeaways from this guide: - Next.js 16 removed implicit caching. Every page is dynamic unless you opt in. - The 'use cache' directive has three variants: default, remote, and private. - You cannot call cookies or headers inside 'use cache' or 'use cache: remote', only 'use cache: private'. - cacheLife controls freshness with stale, revalidate, and expire properties. - cacheTag plus revalidateTag gives you precise invalidation from Server Actions. - The most common build error is calling cookies inside a shared cache scope. - In serverless environments the default 'use cache' is lost on cold starts, use 'use cache: remote' for persistence. - Cache Components must be enabled with cacheComponents: true in next.config.ts or the directive does nothing. - Marketing pages should cache aggressively with 'cacheLife(days)'. Dashboards should stay dynamic with a cached shell via Suspense. - Partial Prerendering is the default rendering behavior when Cache Components is enabled. This guide is written from real-world SaaS patterns used in production, including how to handle authentication, personalization, blog post invalidation, and pricing tables without leaking data between users. If you're upgrading from Next.js 14 or 15, watch this before you ship. 0:00 Next.js 16 killed implicit caching 0:16 What changed in the caching model 1:00 How the use cache directive works 1:52 The three cache directive variants 2:46 When to use "use cache: remote" 3:31 Why "use cache: private" exists 4:18 Controlling lifetime with cacheLife 5:06 Invalidation with cacheTag 5:44 Real SaaS caching patterns 6:37 Common mistakes that break caching 7:33 How to migrate to Next.js 16 caching 8:16 Outro