jsschools

'use cache'

Directive that caches a function, component, or file output (canary).

Since Next 15 (canary, experimental) Spec ↗

Syntax

'use cache' (top of file/function/component)

Returns

directive — Memoizes the marked unit in the cache.

Examples

// Cached async data function
async function getProducts() {
  'use cache'
  const res = await fetch('https://api.example.com/products')
  return res.json()
}

'use cache'
import { cacheLife, cacheTag } from 'next/cache'

export async function Catalog() {
  cacheLife('hours')
  cacheTag('catalog')
  const items = await db.products.all()
  return <Grid items={items} />
}

Notes

Experimental (Next 15 canary; enable `experimental.useCache`/`dynamicIO`). Caches the function/component output keyed by serializable arguments and closed-over values. Tune with `cacheLife()` (named profiles like `'hours'`) and tag with `cacheTag()` for `revalidateTag()`. Intended to eventually replace `unstable_cache`.

See also