How to properly implement use cache with Next.js 16 App Router — replacing old implicit caching?

[JohnHarryson94]

Hi everyone 👋
I recently upgraded from Next.js 15 to Next.js 16 and I'm trying to migrate from the old implicit caching behavior to the new explicit use cache directive.
My app uses the App Router with several dynamic routes that fetch data from an external API. Previously, Next.js handled caching implicitly via fetch() options, but this often led to confusing and unpredictable cache behavior.
Now with use cache, I have a few questions:

What's the recommended pattern for using use cache alongside Server Components that fetch from external APIs? Should I place it at the layout level, page level, or individual component level?
How does use cache interact with Partial Prerendering (PPR)? Can I combine both effectively for routes that have a mix of static and dynamic content?
For pages that need revalidation every few minutes, is use cache with a revalidation time the right approach, or should I still use ISR?
Has anyone run into issues with Turbopack builds and use cache in production?

Any examples or migration tips would be really appreciated!
Environment: Next.js 16.1, React 19, Node.js 22, Turbopack, deployed on self-hosted (not Vercel)

[forgecrafts]

1. Where to place use cache:

Place it as close to the data fetching as possible — ideally at the individual component or function level, not the layout. This gives you granular control. Example:

async function ProductList() {
  'use cache'
  cacheLife('hours')
  const data = await fetch('https://api.example.com/products')
  return <List items={data.json()} />
}

You can add it at the page or layout level, but that caches everything — which is rarely what you want with external APIs.

2. use cache + PPR:

They work great together. PPR splits your page into a static shell and dynamic parts. Use use cache on the cacheable parts, and wrap truly dynamic parts (user-specific data) in <Suspense>. The cached components become part of the static shell automatically.

export default async function Page() {
  return (
    <div>
      <CachedProductList />  {/* use cache inside */}
      <Suspense fallback={<p>Loading...</p>}>
        <DynamicUserGreeting /> {/* runs at request time */}
      </Suspense>
    </div>
  )
}

3. Revalidation every few minutes:

Use use cache with cacheLife — this replaces ISR for App Router:

import { cacheLife } from 'next/cache'

async function getData() {
  'use cache'
  cacheLife({ stale: 60, revalidate: 300, expire: 3600 })
  return fetch('https://api.example.com/data').then(r => r.json())
}

ISR still works but use cache + cacheLife is the recommended approach going forward.

4. Turbopack + use cache in production:

Turbopack builds are stable in Next.js 16. No known issues specifically with use cache. Just make sure you enable it in config:

// next.config.ts
const nextConfig = {
  cacheComponents: true,
}

For self-hosted deployments, note that use cache uses in-memory caching by default. If you're running multiple instances, consider use cache: remote with a custom cache handler to share cache across replicas — otherwise each instance maintains its own cache.