hardFrontend

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?

**TL;DR.** The **Router Cache** (client-side) stores the **RSC payload of visited/prefetched routes** for the session, giving **instant back/forward** navigation. Its staleness can show **outdated data** after a mutation, so you call router.refresh() or revalidate to update it. Router Cache client, in-memory /a (cached) /b (c

581 views

Understand the problem

Client-side cache of visited route segments.

nextjsrouter-cachecachingnavigation

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Refresh the Router Cache after a mutation

'use client';
import { useRouter } from 'next/navigation';

function DeleteButton({ id }) {
  const router = useRouter();
  return <button onClick={async () => {
    await fetch('/api/items/' + id, { method: 'DELETE' });
    router.refresh();          // re-fetch current route's server data (clears stale UI)
  }}>Delete</button>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are the security considerations for Server Actions in Next.js?

What are the caching layers in Next.js (Request Memoization, Data Cache, Full Route Cache, Router Cache)?