Data Fetching, Caching & Revalidation Strategies

Next.js extends the native fetch API to support fine-grained caching and revalidation controls on the server. By default, fetch requests inside Server Components can be configured for static caching ({ cache: 'force-cache' }), dynamic execution ({ cache: 'no-store' }), or time-based incremental revalidation ({ next: { revalidate: 60 } }).

For on-demand cache invalidation, Next.js provides revalidatePath('/blog/[slug]') and revalidateTag('posts'). When an admin updates a blog post, calling revalidateTag('posts') invalidates the server cache instantly without waiting for a TTL timeout, ensuring users see fresh data immediately.

Before

Uncached Manual Fetch

1// Dynamic fetch on every single HTTP request2export async function getPosts() {3  const res = await fetch('https://api.example.com/posts', {4    cache: 'no-store',5  });6  return res.json();7}

After

Tag-Based Cached Fetch with On-Demand Revalidation

1// app/lib/posts.ts2export async function getPosts() {3  const res = await fetch('https://api.example.com/posts', {4    next: { tags: ['posts-list'], revalidate: 3600 },5  });6  return res.json();7}8 9// In your Server Action / API Route after updating a post:10import { revalidateTag } from 'next/cache';11export async function updatePostAction() {12  await db.post.update(...);13  revalidateTag('posts-list'); // Instantly purges cache14}

Exercise

Implement a Server Component data fetch with { next: { tags: ['products'] } } and trigger a revalidateTag('products') call inside a mutation handler.

Check your understanding

What is the difference between revalidatePath and revalidateTag?Show answerHide answer
Answer
revalidatePath purges cached pages for a specific URL route, whereas revalidateTag purges cached data across multiple routes sharing the same cache tag.
How do you disable caching for a specific fetch request in Next.js?Show answerHide answer
Answer
Pass { cache: 'no-store' } in the fetch options object.