How does fetch caching work in the Next.js App Router (force-cache, no-store, revalidate)?

Q: How does fetch caching work in the Next.js App Router (force-cache, no-store, revalidate)?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Think of fetch options as instructions for the library assistant. "No-store" means: fetch the book from the archive every single time someone asks. "Force-cache" means: keep a copy at the desk and hand it out until told otherwise. "Revalidate 60" means: keep the copy, but after a minute, hand out the old copy one more time while you quietly fetch a newer one. And with no instruction at all, the assistant fetches it once

The problem

Question presented to candidate: "Walk me through the options you can pass to fetch in a Server Component and what each does to caching and to the route. What is the default today?"

What a strong answer should cover:

By default a fetch result is not stored across requests (since Next.js 15), but a fetch reached during a static render runs at build time and its result is baked into the page.
cache: 'force-cache' stores the result in the Data Cache and reuses it across requests, even in a dynamic route.
cache: 'no-store' fetches on every request and makes the route dynamic.
next: { revalidate: n } stores the result for n seconds, then serves the stale value while refetching in the background.
next: { tags: [...] } labels the entry so revalidateTag can clear it on demand; these options belong to the previous model, while Cache Components uses 'use cache'.

Clarifying questions expected:

"How fresh does this data have to be?" — seconds, minutes, or exact.
"Is Cache Components on?" — then fetch options give way to 'use cache' and cacheLife.

Code / implementation expected: Yes — the four fetch styles and what the build makes of them.

nextjs
fetch
caching
revalidate

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Think of fetch options as instructions for the library assistant. "No-store" means: fetch the book from the archive every single time someone asks. "Force-cache" means: keep a copy at the desk and hand it out until told otherwise. "Revalidate 60" means: keep the copy, but after a minute, hand out the old copy one more tim

The solution is hidden so you can try first

4 min read · 8 sections

Read the code

The fetch styles in one file

const API = "https://api.example.com";

export default async function Page() {
  const settings = await fetch(`${API}/settings`, { cache: "force-cache" });  // stored until revalidated
  const headlines = await fetch(`${API}/news`, { next: { revalidate: 60 } });  // refreshed after 60 s
  const posts = await fetch(`${API}/posts`, { next: { tags: ["posts"] } });     // clearable with revalidateTag
  const stock = await fetch(`${API}/stock`, { cache: "no-store" });             // every request, route is dynamic
  // ...
  return null;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.