Caching Strategies

Master advanced caching strategies in Next.js — combining SSG, ISR, SSR, and client caching for optimal performance across different content types.

// lib/data/products.ts
import { unstable_cache } from 'next/cache';
import { db } from '@/lib/db';

// Cache DB query with ISR semantics
export const getProducts = unstable_cache(
  async (category?: string) => {
    return db.product.findMany({
      where: category ? { category } : undefined,
      orderBy: { createdAt: 'desc' },
    });
  },
  ['products'], // Cache key prefix
  {
    revalidate: 3600,       // 1 hour TTL
    tags: ['products'],     // Tag for on-demand invalidation
  }
);

// Specific product with its own tag
export const getProduct = unstable_cache(
  async (slug: string) => {
    return db.product.findUnique({ where: { slug } });
  },
  ['product'],
  {
    revalidate: 3600,
    tags: ['products', `product-${slug}`], // Note: slug not available here
    // Use a factory function pattern for per-item tags:
  }
);

// Factory pattern for per-item caching
export function getCachedProduct(slug: string) {
  return unstable_cache(
    async () => db.product.findUnique({ where: { slug } }),
    [`product-${slug}`],
    { revalidate: 3600, tags: ['products', `product-${slug}`] }
  )();
}

Caching is the most impactful performance lever in a Next.js application. A well-designed caching architecture can reduce server costs by 90% and improve response times by 10x. Invest time upfront in designing the caching strategy for each content type — it is much harder to retrofit caching into an existing app.