next-cache-components

Cache Components (Next.js 16+)

Note: Cache Components are available in Next.js canary. Verify cacheComponents is supported in your target version before applying this guidance.

Cache Components enable Partial Prerendering (PPR) - mix static, cached, and dynamic content in a single route.

Enable Cache Components

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

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

This replaces the old experimental.ppr flag.

---

Three Content Types

With Cache Components enabled, content falls into three categories:

1. Static (Auto-Prerendered)

Synchronous code, imports, pure computations - prerendered at build time:

export default function Page() {
  return (
    <header>
      <h1>Our Blog</h1> {/* Static - instant */}
      <nav>...</nav>
    </header>
  )
}

2. Cached (use cache)

Async data that doesn't need fresh fetches every request:

async function BlogPosts() {
  'use cache'
  cacheLife('hours')

  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

3. Dynamic (Suspense)

Runtime data that must be fresh - wrap in Suspense:

import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      <BlogPosts /> {/* Cached */}
      <Suspense fallback={<p>Loading...</p>}>
        <UserPreferences /> {/* Dynamic - streams in */}
      </Suspense>
    </>
  )
}

async function UserPreferences() {
  const theme = (await cookies()).get('theme')?.value
  return <p>Theme: {theme}</p>
}

---

Selection Matrix: Static vs Cached vs Dynamic

When designing a component, use this matrix to determine the correct caching strategy:

Data Type	Frequency of Change	Strategy	Implementation
Marketing copy, Layouts, Nav	Build-time or rarely	Static	Default Server Component
Blog posts, Product catalog	Periodic / CMS-driven	Cached	'use cache' + cacheLife
User profile, Shopping cart	Per-user / Real-time	Dynamic	Suspense + await cookies()
Admin dashboard, Analytics	High-frequency / Secure	Dynamic	Suspense + await headers()