Next.js 16 Caching Strategies Explained: The 2026 Guide

// ============================================
// Full Route Cache — Static Generation Patterns
// ============================================

// ---- Default in Next.js 16: fetch is NOT cached ----
// This page is dynamic by default — fresh data every request

// File: app/products/[slug]/page.tsx

interface Product {
  id: string
  slug: string
  name: string
  price: number
  description: string
}

// This fetch uses the default: cache: 'no-store' — fresh every request
async function getProductFresh(slug: string): Promise<Product> {
  const res = await fetch(`https://api.example.com/products/${slug}`)
  return res.json()
}

// ---- Opt-in to permanent cache: force-cache ----
// Use for truly static content (rarely)

async function getProductStatic(slug: string): Promise<Product> {
  const res = await fetch(`https://api.example.com/products/${slug}`, {
    cache: 'force-cache', // Opt-in: cache permanently until revalidate
  })
  return res.json()
}

// ---- Opt-in to ISR: stale-while-revalidate ----
// Serve cached data, regenerate in background after N seconds

async function getProductWithRevalidation(slug: string): Promise<Product> {
  const res = await fetch(`https://api.example.com/products/${slug}`, {
    next: { revalidate: 300 }, // Regenerate every 5 minutes
  })
  return res.json()
}

// ---- On-demand revalidation: webhook-triggered ----

// File: app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { path, tag, secret } = await request.json()

  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }

  if (path) {
    revalidatePath(path)
    return NextResponse.json({ revalidated: true, path })
  }

  if (tag) {
    revalidateTag(tag)
    return NextResponse.json({ revalidated: true, tag })
  }

  return NextResponse.json({ error: 'Provide path or tag' }, { status: 400 })
}

// ---- Tagged fetch: revalidate groups of data ----

async function getProductByTag(slug: string): Promise<Product> {
  const res = await fetch(`https://api.example.com/products/${slug}`, {
    next: {
      revalidate: 3600,
      tags: ['products', `product-${slug}`],
    },
  })
  return res.json()
}

// ---- generateStaticParams: pre-generate known routes ----

export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products', {
    cache: 'force-cache',
  }).then((res) => res.json())

  return products.map((product: Product) => ({
    slug: product.slug,
  }))
}

// ============================================
// Partial Prerendering — Static Shell + Dynamic Streaming
// ============================================

// File: app/dashboard/page.tsx
import { Suspense } from 'react'

// ---- Static shell: pre-rendered at build time ----

function DashboardHeader() {
  return (
    <header className="border-b p-4">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <nav className="mt-2 flex gap-4">
        <a href="/dashboard/overview">Overview</a>
        <a href="/dashboard/analytics">Analytics</a>
      </nav>
    </header>
  )
}

// ---- Dynamic holes: streamed with Suspense ----

async function RevenueCard() {
  const res = await fetch('https://api.example.com/revenue/today', {
    cache: 'no-store', // Dynamic — fresh every request
  })
  const data = await res.json()

  return (
    <div className="rounded-lg border p-4">
      <p className="text-sm text-muted-foreground">Today's Revenue</p>
      <p className="text-3xl font-bold">${data.total.toLocaleString()}</p>
    </div>
  )
}

async function ActivityFeed() {
  const res = await fetch('https://api.example.com/activity/recent', {
    cache: 'no-store',
  })
  const activities = await res.json()

  return (
    <div className="space-y-2">
      {activities.map((activity: any) => (
        <div key={activity.id} className="flex items-center gap-2 text-sm">
          <span>{activity.description}</span>
        </div>
      ))}
    </div>
  )
}

function RevenueSkeleton() {
  return <div className="h-24 animate-pulse rounded-lg bg-muted" />
}

// ---- Main page: static shell + Suspense-wrapped dynamic holes ----

export default function DashboardPage() {
  return (
    <div>
      <DashboardHeader />
      <main className="grid gap-4 p-4 sm:grid-cols-2">
        <Suspense fallback={<RevenueSkeleton />}> 
          <RevenueCard />
        </Suspense>
        <Suspense fallback={<RevenueSkeleton />}> 
          <ActivityFeed />
        </Suspense>
      </main>
    </div>
  )
}

// ---- With PPR: dynamic APIs only affect their boundary ----
// export default async function Page({ searchParams }) {
//   return (
//     <Suspense fallback={...}>
//       <ComponentUsingSearchParams searchParams={searchParams} />
//     </Suspense>
//   )
// }

// ============================================
// fetch() Cache — Per-Request Data Freshness Control
// ============================================

// ---- Cache options reference (Next.js 16) ----

// Option 1: no-store (DEFAULT)
// Data is fetched fresh on every request — never cached
async function getUserSession(token: string) {
  const res = await fetch('https://api.example.com/session', {
    cache: 'no-store',
    headers: { Authorization: `Bearer ${token}` },
  })
  return res.json()
}

// Option 2: force-cache
// Data is fetched once and cached permanently until revalidated
async function getSiteConfig() {
  const res = await fetch('https://api.example.com/config', {
    cache: 'force-cache',
  })
  return res.json()
}

// Option 3: revalidate (stale-while-revalidate)
// Serve cached data, regenerate in background after N seconds
async function getProductList() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 300 }, // 5 minutes
  })
  return res.json()
}

// Option 4: Tagged revalidation
async function getProductsByCategory(category: string) {
  const res = await fetch(`https://api.example.com/products?category=${category}`, {
    next: {
      revalidate: 600,
      tags: ['products', `category-${category}`],
    },
  })
  return res.json()
}

// ---- Mixing cache strategies on one page ----

export default async function ProductPage({ params }: { params: { slug: string } }) {
  const config = await getSiteConfig() // cached permanently
  const product = await fetch(`https://api.example.com/products/${params.slug}`, {
    next: { revalidate: 300 },
  }).then(r => r.json())
  const pricing = await fetch(`https://api.example.com/pricing/${params.slug}`, {
    cache: 'no-store',
  }).then(r => r.json())

  return (
    <div>
      <h1>{product.name}</h1>
      <p>${pricing.effectivePrice}</p>
    </div>
  )
}

// ============================================
// React cache() — Request-Level Deduplication
// ============================================

import { cache } from 'react'

// ---- CORRECT: cache() at module level ----

export const getUser = cache(async (userId: string) => {
  console.log('Fetching user:', userId) // Logs once per unique userId per request
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    cache: 'no-store',
  })
  return res.json()
})

export const getProduct = cache(async (slug: string) => {
  const res = await fetch(`https://api.example.com/products/${slug}`, {
    next: { revalidate: 300 },
  })
  return res.json()
})

// ---- Usage: multiple components, one fetch ----

// File: app/layout.tsx
import { getUser } from '@/lib/data'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const user = await getUser('current') // First call — fetches
  return <html><body><nav>{user.name}</nav>{children}</body></html>
}

// File: app/dashboard/page.tsx
import { getUser } from '@/lib/data'

export default async function DashboardPage() {
  const user = await getUser('current') // Second call — returns cached result
  return <div>Welcome, {user.name}</div>
}

// ============================================
// Caching Decision Framework
// ============================================

/*
Data Type              | Changes     | Strategy
-----------------------|-------------|---------------------------
Site config            | Never       | fetch cache: 'force-cache'
Product catalog        | Hourly      | fetch next: { revalidate: 3600 }
Product prices         | Minutes     | fetch next: { revalidate: 300 }
User dashboard data    | Real-time   | fetch cache: 'no-store' (default)
Blog posts             | Daily       | Full Route Cache + revalidate: 86400
*/

import { Suspense } from 'react'
import { cache } from 'react'

export const getCategory = cache(async (slug: string) => {
  const res = await fetch(`https://api.example.com/categories/${slug}`, {
    next: { revalidate: 3600, tags: ['categories'] },
  })
  return res.json()
})

export default async function CategoryPage({ params }: { params: { category: string } }) {
  const category = await getCategory(params.category)

  return (
    <div>
      <h1>{category.name}</h1>
      <Suspense fallback={<ProductGridSkeleton />}>
        <ProductList category={params.category} />
      </Suspense>
    </div>
  )
}

async function ProductList({ category }: { category: string }) {
  const products = await fetch(`https://api.example.com/products?category=${category}`, {
    next: { revalidate: 300, tags: ['products'] },
  }).then(r => r.json())
  return <div>{products.map((p: any) => <div key={p.id}>{p.name}</div>)}</div>
}

function ProductGridSkeleton() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="h-40 animate-pulse rounded bg-muted" />
      ))}
    </div>
  )
}