React Academy · Lesson

fetch() with Cache Options in Next.js

Use force-cache, no-store, and revalidate options on fetch to control caching behaviour.

fetch() with Cache Options in Next.js is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Extended fetch in Next.js

Next.js extends the native fetch() API with a next option for caching and revalidation control. This only works in Server Components and route handlers.

force-cache (Default)

By default, fetch() in Next.js uses force-cache — it caches the response indefinitely and reuses it for all requests until explicitly revalidated.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — Always Fresh

no-store disables caching entirely. Every request hits the origin. Use for personalized or sensitive data.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — Time-Based ISR

The next.revalidate option caches the response but revalidates it every N seconds in the background (stale-while-revalidate pattern).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

Segment-Level revalidate

Export a revalidate constant from a page or layout to apply a revalidation interval to all fetches in that segment.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Tag-Based Revalidation

Assign tags to a fetch call with next.tags. Use revalidateTag(tag) in a Server Action or route handler to invalidate all tagged caches on demand.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) invalidates the cache for a specific URL path, causing it to regenerate on the next request.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Dynamic Functions Opt-Out

Calling cookies(), headers(), or reading searchParams in a page makes it dynamic — it opts out of caching entirely for that page.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Deduplication

Next.js deduplicates identical fetch calls within a single render pass — if two Server Components fetch the same URL, only one HTTP request is made.

Request Memoization vs Cache

There are two cache layers: Request Memoization (per-request dedup, automatic) and the Data Cache (persistent, controlled by cache/revalidate options).

Debugging Cache Behavior

Run next build and check the build output — each route shows its rendering strategy: Static (cached), Dynamic (no-cache), or ISR (revalidate interval).

Quick Check

Which fetch cache option should you use for data that changes rarely but should update without a full redeploy?

Recap

Use cache: 'force-cache' for static data, cache: 'no-store' for always-fresh data, and next: { revalidate: N } for ISR. Tag fetches with next.tags and call revalidateTag() for on-demand invalidation. Dynamic functions automatically opt pages out of caching.

Frequently asked questions

Is the “fetch() with Cache Options in Next.js” lesson free?

Yes — the full text of “fetch() with Cache Options in Next.js” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “fetch() with Cache Options in Next.js”?

Use force-cache, no-store, and revalidate options on fetch to control caching behaviour. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “fetch() with Cache Options in Next.js” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy