Under The Hood
frontend nextjs Next.js 15+

use cache Directive & Dynamic IO Runtime Boundaries

Last updated
Prerequisites:
React Server Components
Next.js App Router Caching
  • nextjs
  • use-cache
  • dynamic-io
  • caching
  • react
  • app-router

Read at your depth

The practical view

In Next.js 15, Dynamic IO (`experimental.dynamicIO: true`) changes the default caching model: all data fetching and rendering is dynamic by default. To cache a function or component, you explicitly annotate it with the `'use cache'` directive. You can customize the cache lifetime using `cacheLife()` and tag it using `cacheTag()`.

The same idea in other frameworks

react equivalent 
React `cache()` function for per-request deduplication.

Legacy vs modern

Implicit Fetch Caching vs Explicit 'use cache'

Next.js 14 implicitly cached `fetch`; Next.js 15 Dynamic IO requires explicit opt-in via `'use cache'`.

before → after
Implicit Next.js 14 Cache 
const res = await fetch(url); // ❌ OLD: Implicitly cached by default
Explicit 'use cache' Directive 
'use cache';
import { cacheLife, cacheTag } from 'next/cache'; // ✅ NEW

Interview gotchas

Context

Interviewers test your awareness of the architectural shift from implicit to explicit caching.

The mechanical answer

In Next.js 13 and 14, `fetch` requests were cached by default (`force-cache`), which caused confusion and unexpected stale data in dynamic applications. Next.js 15 introduced Dynamic IO and `'use cache'` to make caching opt-in, explicit, and applicable to *any* asynchronous operation (like direct database queries via Prisma or Drizzle), not just the `fetch` API.

Trap

Do not state that `'use cache'` only works on `fetch()` calls. It can cache any async JavaScript function or React Server Component.

Under The Hood — a multi-depth technical interview hub.

Third-party licenses Press ⌘ K to search.