Next.js 16 Cache Components

Demonstrating ISR and SSR using the 'use cache' directive, cacheLife, and cacheTag

ISR Route

use cache

Products prerendered at build time via generateStaticParams. Cached with inline cacheLife({ ... }) timings that revalidate every hour.

  • • Page-level 'use cache' directive
  • • Inline cacheLife({ ... }) timings
  • • cacheTag for on-demand revalidation
  • • generateStaticParams for build-time prerendering
View ISR demo →

SSR Route

headers()

Fully dynamic route using headers() to opt into dynamic rendering. Includes a cached sub-component that demonstrates mixing dynamic and cached content.

  • • headers() for fully dynamic rendering
  • • Cached sub-component with 'use cache'
  • • Fresh data on every request
  • • Request-time headers and timestamps
View SSR demo →

Configuration

This example uses a single config flag to enable cache components:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

On-Demand Revalidation

Invalidate cached data by tag via the API endpoint:

# Revalidate a specific product
GET /api/revalidate?tag=product-1

# Revalidate all products
GET /api/revalidate?tag=products

# Revalidate categories
GET /api/revalidate?tag=categories