Next.js 16+ · Directive

use cache

The 'use cache' directive marks an async route, React component, function, or file exports as cacheable. Enable Cache Components first, then place the directive at the desired scope to reuse the resulting output.

Since: v16.0.0

How it works

Enable Cache Components and add 'use cache' to an async function, component, or file. The directive makes the covered output reusable; its scope determines whether a data result or broader UI output is cached.

Syntax

'use cache'

Returns

Caches and reuses the covered function, component, route, or file export output based on its inputs.

Key points

You can cache a route, React component, or function.
File-level placement covers every export in that file.
Inline placement caches the selected function or component result.
Server entries use in-memory storage and follow cacheLife timing settings.
The directive belongs to the Cache Components feature set.
The directive stabilized in Next.js 16.0.0 with Cache Components.

Common mistakes

Do not access request-time APIs directly inside a cached scope; pass appropriate values in or use a directive intended for runtime-dependent data.
The function or component containing the directive must be asynchronous.
Use serializable arguments and return values when crossing the cache boundary.

Example: Cache a data-fetching function

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = { cacheComponents: true }
export default nextConfig

// app/products/page.tsx
import { getProducts } from '@/lib/products'

export default async function ProductsPage() {
  const products = await getProducts()
  return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
}

// lib/products.ts
export async function getProducts() {
  'use cache'
  const response = await fetch('https://api.example.com/products')
  return response.json() as Promise<{ id: string; name: string }[]>
}

Enable Cache Components, then place the directive at the top of an async function, component, or file. Next.js caches the covered return value and derives reuse from the code and inputs.

When to use it

Cache data-level work

An expensive database query or API request should be reused across renders.

Cache UI output

A mostly static page or component should have its rendered output reused.

Cache a module's exports

Several exported functions in one module share the same caching policy.

Interview questions

QWhat does the 'use cache' directive do?

It marks a route, component, or function as cacheable. At file scope it applies to every export; inside a function or component it applies only to that scope, and covered output is reused based on its inputs.

Follow-up: How would you cache only an expensive data read rather than the whole page? Put 'use cache' inside the async data function so the page remains outside that cache scope.

QHow do you enable and apply 'use cache'?

Cache Components must be enabled with cacheComponents in next.config.ts. The directive is then placed at the top of an async function, component, or file.

Follow-up: What happens if Cache Components is not enabled? The documented feature is not opted into, so the directive-based Cache Components behavior is unavailable.

QWhat restrictions apply inside a cached scope?

A normal 'use cache' scope cannot directly read cookies(), headers(), or searchParams because those are request-time APIs. Cached arguments and return values must also be serializable, apart from supported values passed through without inspection.

Follow-up: Which variant is designed for runtime-dependent data? 'use cache: private' permits cookies(), headers(), and searchParams, subject to its documented constraints.

cacheComponents
cacheLife
cacheTag
use cache: private
use cache: remote
Cache Components

Source: Next.js |. Checked 2026-10-15.