Next.js Caching Architecture

// Same request in same render pass = single fetch
async function Component1() {
  const data = await fetch('/api/user'); // Fetch 1
  return <div>{data.name}</div>;
}

async function Component2() {
  const data = await fetch('/api/user'); // Deduplicated!
  return <div>{data.email}</div>;
}

// Persistent cache on server
const data = await fetch('https://api.example.com', {
  cache: 'force-cache',    // Cache indefinitely (default)
  // cache: 'no-store',    // Never cache
  next: { revalidate: 60 }, // Cache for 60 seconds
  next: { tags: ['users'] }, // Tag-based invalidation
});

// Invalidate by tag
revalidateTag('users');

// Static routes cached at build time
// Invalidation triggers:
// - revalidatePath()
// - revalidateTag()
// - Deploy

// Opt out of caching
export const dynamic = 'force-dynamic';
export const revalidate = 0;

// Prefetched routes cached in browser
import Link from 'next/link';

// Prefetch on hover (default)
<Link href="/dashboard">Dashboard</Link>

// Disable prefetch
<Link href="/dashboard" prefetch={false}>Dashboard</Link>

// Programmatic invalidation
import { useRouter } from 'next/navigation';
const router = useRouter();
router.refresh(); // Invalidate router cache

// Log cache behavior
export const fetchCache = 'default-cache';
export const revalidate = false;
export const dynamic = 'auto';
export const dynamicParams = true;