Understanding How the 'use cache' Directive Works in Production Next.js Apps

Dia Loghmari

Dia Loghmari / January 17, 2026

Understanding How the "use cache" Directive Works in Production Next.js Apps

This article demonstrates Next.js v16.1 with a Node.js backend to mock API responses. Full repo: https://github.com/dialoghmari/nextjs-cache-demo

Scenario 1: Fully Static Page (No Cache Directive)

Setup:

  • Page component has "use cache": No
  • Child components have "use cache": No

When a page is completely static (no "use cache" anywhere), all components are rendered as HTML at build time. On Vercel, requests look like this:

image.png

Result: Pure static HTML served directly from CDN.

Scenario 2: Static Page with Cached Components

Setup:

  • Page component has "use cache": No
  • Child components have "use cache": Yes

When only child components use the cache directive:

1. First Visit: Vercel invokes an ISR Function to render the page for the first time and updates the ISR cache.

image.png

2. Second Visit (Ctrl+R): Vercel serves from Cache because the page has already been built.

image.png

3. After Cache Expiry: Vercel serves the stale HTML from Cache, then invokes an ISR Function in the background to refresh it. This also triggers an ISR cache update.

image.png

Scenario 3: Dynamic Page with Mixed Components

Setup:

  • Page component has "use cache": No
  • Some child components have "use cache": Yes
  • Some child components have "use cache": No (fully SSR)

1. First Load: Vercel invokes Cache for components that have been cached previously, responds with HTML, then invokes a Function to fetch SSR component data and an ISR Function to build/refresh any uncached components. Finally, it streams both parts (SSR and ISR components).

image.png

2. Reload (Ctrl+R): Vercel serves cached components from Cache, then invokes a Function to stream the SSR component.

image.png

Scenario 4: Cached Page Component

Setup:

  • Page component has "use cache": Yes (with cacheLife('hours'))
  • Child components have "use cache": Mixed (yes and no)

When the page itself uses the cache directive:

1. First Visit: Vercel invokes an ISR Function to build all components (regardless of their individual cache settings) and returns the HTML.

image.png

2. Reload: Vercel simply serves from Cache and returns the HTML immediately.

image.png

Scenario 5: Mixed Caching Strategies

Setup:

  • Page component has "use cache": No
  • Multiple child components with different cache profiles (5s, 15s, 30s)
  • One SSR component (no cache)

Every page load invokes Cache to return the static HTML shell, then invokes a Function to build all RSC components (both cached and SSR).

image.png

Key Takeaways

  1. Component-level caching works independently from page-level caching
  2. ISR Functions handle first renders and cache refreshes
  3. Cached responses serve stale content while revalidating in the background
  4. Mixed strategies let you optimize different parts of the page independently
  5. SSR components always fetch fresh data on every request