Skip to the solution
HardSystem Design4 min read

What changed about caching defaults in Next.js 15?

1.0k views

The problem

Question presented to candidate: "You are upgrading an app from Next.js 14. Which caching defaults changed in 15, what will you notice, and how do you opt back in where you need to?"

What a strong answer should cover:

  • fetch requests are no longer cached by default: the default moved from force-cache to not cached.
  • GET Route Handlers are no longer cached by default; opt in with export const dynamic = 'force-static'.
  • The client Router Cache no longer reuses pages of dynamic routes on navigation: staleTimes.dynamic went from 30 s to 0 s.
  • Static pages, layouts, loading states and back/forward navigation are still reused.
  • Next.js 16 keeps these defaults and adds Cache Components, where data is uncached unless marked with 'use cache'; since 16.4, create-next-app enables it for new App Router apps.

Clarifying questions expected:

  • "Which pages relied on implicit caching?" β€” they may get slower or hit the API more after the upgrade.
  • "Are you planning to adopt Cache Components?" β€” then opt back in with 'use cache' rather than fetch options.

Code / implementation expected: Yes β€” the three opt-backs.

  • nextjs
  • caching
  • next-15
  • defaults

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

4 min read Β· 8 sections

Read the code

Opting back in, one place at a time
// 1. a fetch that may be reused
const data = await fetch("https://api.example.com/countries", { cache: "force-cache" });

// 2. a GET Route Handler served from the build output
// app/api/countries/route.ts
export const dynamic = "force-static";
export async function GET() {
  return Response.json(await getCountries());
}

// 3. the client cache lifetime for dynamic pages
// next.config.ts
const nextConfig = { experimental: { staleTimes: { dynamic: 30 } } };
export default nextConfig;

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 102 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 do you handle instrumentation and observability in Next.js (instrumentation.ts)?

Continue