JS Guide
HomeQuestionsSearchResources
Search

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeQuestionsnextjs
Prev
nextjs
senior
caching

How does caching and revalidation work in Next.js?

nextjs
caching
revalidation
isr
data-cache
router-cache
performance
Quick Answer

Next.js has multiple cache layers: Request Memoization (dedupes fetch calls per render), Data Cache (persists fetch results across requests), Full Route Cache (caches rendered routes), and Router Cache (client-side cache). Revalidation can be time-based (revalidate option), on-demand (revalidatePath/revalidateTag), or opt-out entirely with cache: 'no-store'.

Detailed Explanation

The Four Cache Layers

1. Request Memoization

  • Scope: Single render pass
  • Purpose: Deduplicate identical fetch requests
  • How: React extends fetch to memoize same URL + options
  • Benefit: Call getUser() in multiple components, only one request made

2. Data Cache

  • Scope: Persistent across requests and deployments
  • Purpose: Store fetch results on server
  • Control: fetch() options: cache, next.revalidate, next.tags
  • Revalidation: Time-based or on-demand

3. Full Route Cache

  • Scope: Build time + runtime (ISR)
  • Purpose: Cache rendered HTML and RSC payload
  • Behavior: Static routes cached at build, dynamic routes rendered per request
  • Invalidation: When Data Cache is revalidated

4. Router Cache (Client-side)

  • Scope: Browser session
  • Purpose: Cache visited routes for instant back/forward navigation
  • Duration: 30 seconds (dynamic), 5 minutes (static)
  • Invalidation: router.refresh(), revalidatePath, cookie changes

Cache Control Options

// No caching - always fresh
fetch(url, { cache: 'no-store' })

// Cache indefinitely (default for GET)
fetch(url, { cache: 'force-cache' })

// Revalidate every 60 seconds
fetch(url, { next: { revalidate: 60 } })

// Tag for on-demand revalidation
fetch(url, { next: { tags: ['posts'] } })

On-Demand Revalidation

  • revalidatePath('/blog') - Revalidate specific path
  • revalidatePath('/blog', 'layout') - Revalidate layout and children
  • revalidateTag('posts') - Revalidate all fetches with tag

Route Segment Config

// Force dynamic rendering
export const dynamic = 'force-dynamic';

// Force static (error if dynamic functions used)
export const dynamic = 'force-static';

// Revalidate entire route every hour
export const revalidate = 3600;

Code Examples

Fetch Caching Options
// app/products/page.tsx

// Cached indefinitely (default) - good for static data
async function getCategories() {
  const res = await fetch('https://api.example.com/categories');
  return res.json();
}

// Time-based revalidation - good for data that changes periodically
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // Revalidate every hour
  });
  return res.json();
}

// No caching - good for real-time data
async function getInventory(productId: string) {
  const res = await fetch(`https://api.example.com/inventory/${productId}`, {
    cache: 'no-store', // Always fresh
  });
  return res.json();
}

// Tagged for on-demand revalidation
async function getProductDetails(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { 
      tags: [`product-${id}`, 'products'], // Multiple tags
      revalidate: 86400, // Also time-based (1 day)
    },
  });
  return res.json();
}

Resources

Caching in Next.js

docs

revalidatePath API Reference

docs

Data Fetching, Caching, and Revalidating

docs

Related Questions

Explain the different rendering strategies in Next.js (SSR, SSG, ISR) and when to use each approach.

senior
rendering

How does data fetching work in Next.js?

mid
data-fetching
Previous
What performance optimization techniques does Next.js provide?