The Next.js Caching Layers
Request Memoization: deduplicates fetch calls in a single render
Data Cache: persists fetched data across requests
Full Route Cache: caches rendered output of static routes
Router Cache: caches rendered routes in the client
Incremental Static Regeneration (ISR)
export const revalidate = 60;export default async function Page() { const data = await fetch("https://api.example.com/data"); return <div>{JSON.stringify(data)}</div>;}// On-demand revalidationimport { revalidatePath, revalidateTag } from "next/cache";revalidatePath("/blog");revalidateTag("posts");Fetch Cache Options
await fetch(url); // Default: cachedawait fetch(url, { cache: "no-store" }); // Skip cacheawait fetch(url, { next: { revalidate: 3600 } }); // 1 hourawait fetch(url, { next: { tags: ["posts"] } }); // Tag-basedCache Best Practices
Default to static (ISR) for infrequent changes
Use force-dynamic for personalized content
Tag fetches for on-demand revalidation
Use revalidate for time-based updates