Next.js Cache vs no-store vs revalidate: Simple Guide with Clear Examples

When working with Next.js 13+ (App Router), understanding how caching works is crucial for performance and data freshness. Developers often get confused between cache, no-store, and revalidate. Let’s break them down with simple explanations and real-world examples.

1. cache: 'force-cache' (Default Behavior)

When to use: When your data rarely changes, and performance is a priority.

By default, in the App Router, Next.js automatically caches data fetched inside Server Components. This default behavior is equivalent to using cache: 'force-cache'. It tells Next.js to cache the data at build time or on the first request, and reuse it for future requests.

Example:

export async function getData() {
  const res = await fetch('https://api.example.com/products', {
    cache: 'force-cache'
  });
  return res.json();
}

export async function getData() {
  const res = await fetch('https://api.example.com/products', {
    cache: 'force-cache'
  });
  return res.json();
}

Here, Next.js will cache the response. The next user hitting this page will get the cached data instantly — no network request.

Use case: Static content, blogs, marketing pages, product listings that change rarely.

Default Note: If you don’t specify any caching option in fetch(), this default caching behavior (force-cache) applies automatically in Server Components.

2. cache: 'no-store'

When to use: When you always need the freshest data from the server.

This setting disables caching completely. Every request fetches new data.

Example:

export async function getData() {
  const res = await fetch('https://api.example.com/orders', {
    cache: 'no-store'
  });
  return res.json();
}

export async function getData() {
  const res = await fetch('https://api.example.com/orders', {
    cache: 'no-store'
  });
  return res.json();
}

Each time the page loads, a new network call happens.

Use case: Dashboards, admin panels, live data feeds, user-specific data.

3. next: { revalidate: <seconds> }

When to use: When you want a balance between speed and freshness.

This tells Next.js to serve cached data but revalidate it in the background after a set time. Once the revalidation period expires, Next.js fetches fresh data and updates the cache for future requests.

Example:

export async function getData() {
  const res = await fetch('https://api.example.com/news', {
    next: { revalidate: 60 }
  });
  return res.json();
}

export async function getData() {
  const res = await fetch('https://api.example.com/news', {
    next: { revalidate: 60 }
  });
  return res.json();
}

This means: serve cached data instantly, but if it’s older than 60 seconds, fetch fresh data for the next request.

Use case: News feeds, product prices, data that updates periodically.

Quick Summary

Bonus Tip

If you’re using Server Components, caching is automatic by default. Use these options inside fetch() to control caching precisely.

For Client Components, you can use SWR or React Query for client-side caching instead.

In short:

• Need speed? force-cache
• Need live data? no-store
• Need balance? revalidate

By understanding these options — and knowing that force-cache is the default in Server Components — you can make your Next.js app both fast and up-to-date, giving users the best possible experience.