Skip to the solution
HardSystem Design5 min read

What is the Full Route Cache in Next.js?

160 views

The problem

Question presented to candidate: "After a deploy, a page still shows yesterday's content even though the API has new data. Explain the Full Route Cache and how you would fix this."

What a strong answer should cover:

  • The Full Route Cache is the stored render output (HTML and RSC payload) of routes that are static at build time.
  • Requests to those routes are served from the stored output without rendering or fetching.
  • Dynamic routes, those using request-time APIs or no-store, are not stored.
  • It is invalidated by redeploying, time-based revalidate (ISR), or revalidatePath and revalidateTag.
  • In the Next.js 16 docs this sits under the previous caching model; with Cache Components the static shell plays this role.

Clarifying questions expected:

  • "Is the page static in the build output?" β€” the β—‹ symbol answers it.
  • "How fresh must it be?" β€” decides between ISR and on-demand revalidation.

Code / implementation expected: Yes β€” a static page with a revalidate time and an action that revalidates it.

  • nextjs
  • full-route-cache
  • caching
  • static

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

The solution is hidden so you can try first

5 min read Β· 8 sections

Read the code

A static page with a lifetime and an on-demand refresh
// app/blog/page.tsx  -> β—‹ with a 1 hour lifetime
export const revalidate = 3600;

export default async function Blog() {
  const posts = await fetch("https://cms.example.com/posts", { next: { tags: ["posts"] } }).then((r) => r.json());
  return <ul>{posts.map((p: { id: string; title: string }) => <li key={p.id}>{p.title}</li>)}</ul>;
}

// app/blog/actions.ts
"use server";
import { revalidatePath } from "next/cache";
export async function publish() {
  // ...save the post
  revalidatePath("/blog"); // next request renders /blog again
}

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.

Question 122 of 129 in Next.js

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All Next.js questions
Up nextHard

How does prefetching and navigation caching work in Next.js 16?

Continue