The Router Cache

After navigating to a route, Next stores its rendered React payload in the browser so back/forward and re-navigation feel instant.

4 min read Level 3/5 #nextjs#cache#router-cache

What you'll learn

Understand the per-session, per-user nature
Invalidate with `router.refresh()`
Know that default expiry times are short

The Router Cache lives in the browser. Once you navigate to a route, its RSC payload is kept around so going back, forward, or re-visiting that route does not re-fetch from the server.

Per-Session, Per-User

This cache is unique to each user’s tab. It is never shared. That is the opposite of the Data Cache, which is shared across users.

Default Expiry

Static segments stay around for about 5 minutes; dynamic ones for about 30 seconds by default. These TTLs are short on purpose — the Router Cache is a UX optimization, not a data store.

Invalidating in a Client Component

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

export function RefreshButton() {
  const router = useRouter()
  return <button onClick={() => router.refresh()}>Refresh</button>
}

router.refresh() re-renders the current segment on the server and merges the result into the cache. State in client components is preserved.

Invalidating from a Server Action

revalidatePath('/foo') busts both the server-side caches for /foo and the matching entries in the Router Cache for everyone navigating to /foo next. You usually call it right after a mutation:

'use server'
import { revalidatePath } from 'next/cache'

export async function deletePost(id: string) {
  await db.post.delete({ where: { id } })
  revalidatePath('/posts')
}

The Full Route Cache →