Caching is the secret to speed and scalability in Next.js

1. Enable Cache Components

In next.config.ts:

const nextConfig = {
  cacheComponents: true,
}

2. `use cache` – Static, Shared, Prerendered

Best for blog posts, product pages, and marketing content.

• Prerendered at build time
• Shared across all users
• No cookies or headers required

Example: Caching a Component

'use cache'

export async function Bookings({ type = 'haircut' }) {
  const data = await fetch(`/api/bookings?type=${type}`).then(r => r.json())
  return <div>{data.length} bookings</div>
}

Set Cache Lifetime

cacheTag('posts')
cacheLife({ stale: 60 })

3. `use cache: private` – Personalized Per-User

Use when data depends on cookies, headers, or search params.

• Cached per user
• Uses cookies() or headers()
• Works in dynamic context

Example: Personalized Recommendations

'use cache: private'
const sessionId = (await cookies()).get('session-id')?.value || 'guest'
return fetch(`/api/recs?product=${productId}&session=${sessionId}`)

4. `use cache: remote` – Dynamic, Shared, Runtime

Use when calling await connection() or caching shared data at runtime.

• Shared across users
• Works after connection()
• Stored in server-side cache handler

Example: Product Price

'use cache: remote'
cacheTag(`price-${productId}`)
cacheLife({ expire: 3600 })

5. Comparison Table

Feature	use cache	use cache: private	use cache: remote
Prerendered at build	✅	❌	❌
Uses cookies	❌	✅	❌
Works after connection()	❌	✅	✅
Shared across users	✅	❌	✅
Best for	SEO, blog	User dashboard	Prices, analytics

6. Nesting Rules

• 'use cache' can contain 'use cache: remote'
• 'use cache: remote' can contain itself
• Invalid: 'use cache: private' cannot contain 'use cache: remote'

7. Real-World Example: E-Commerce Product Page

Combining all three cache types for product, price, and recommendations.

await getProduct(id) // use cache
await getPrice(id)   // use cache: remote
await getRecs(id)    // use cache: private

8. Bonus: `use server` and `use client`

• 'use server': for server-side functions
• 'use client': for interactive components