What is the Router Cache in Next.js and what are its implications?

Q: What is the Router Cache in Next.js and what are its implications?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Hard > **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 Your browser keeps a small photo album of pages you have seen. Pressing Back flips to the photo instead of walking back to the scene, which is fast, but if someone repainted the room while you were away, the photo still shows the old colour. Next.js gives you ways to tell the album to throw photos away: take a new one of the current page (router.refresh), or have the server say "these rooms changed" when you make an edit

The problem

Question presented to candidate: "A user edits an item, clicks Back, and sees the old value. Explain what the Router Cache is, why this happens, and how you fix it."

What a strong answer should cover:

The Router Cache (called the Client Cache in the Next.js 16 docs) is an in-memory browser cache of RSC payloads for visited and prefetched routes.
Back and forward navigation reuse stored payloads without a request; that is where stale screens come from.
Since Next.js 15, pages of dynamic routes are not reused on normal link navigation (staleTimes.dynamic defaults to 0); static routes are kept for 5 minutes.
It is cleared by a full reload, router.refresh(), and by revalidatePath, revalidateTag, updateTag or setting cookies inside a Server Action.
Layouts and loading states are reused across navigations, which is what makes navigation feel instant.

Clarifying questions expected:

"Was the mutation a Server Action or an API call?" — only the former can revalidate the client cache in the same response.
"Is the stale screen on Back or on a link click?" — Back always reuses.

Code / implementation expected: Yes — a Server Action that revalidates, and a client refresh.

nextjs
router-cache
caching
navigation

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: Hard

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

Your browser keeps a small photo album of pages you have seen. Pressing Back flips to the photo instead of walking back to the scene, which is fast, but if someone repainted the room while you were away, the photo still shows the old colour. Next.js gives you ways to tell the album to throw photos away: take a new one of th

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

Revalidating from a Server Action, and refreshing after a plain fetch

// app/items/actions.ts
"use server";
import { revalidatePath } from "next/cache";
export async function rename(id: string, name: string) {
  await db.item.update({ where: { id }, data: { name } });
  revalidatePath("/items"); // server output and browser payloads for /items are dropped
}

// components/LegacySave.tsx
"use client";
import { useRouter } from "next/navigation";
export function LegacySave({ id }: { id: string }) {
  const router = useRouter();
  async function save() {
    await fetch(`/api/items/${id}`, { method: "PATCH" });
    router.refresh(); // the Route Handler could not invalidate the client cache
  }
  return <button onClick={save}>Save</button>;
}

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.