Router cache on client in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Next.js cache pages on the client?

Consider a Next.js app using the App Router. When you navigate between pages, how does Next.js handle caching on the client side?

A Next.js caches the JavaScript and JSON data for pages in memory, enabling fast client-side transitions without full reloads.

B Next.js caches the entire HTML of each page in the browser's local storage for instant reloads.

C Next.js disables caching on the client to always fetch fresh data from the server on navigation.

D Next.js caches only CSS files on the client, but reloads page data every time.

💡 Hint

Think about how client-side navigation avoids full page reloads.

Next.js caches JavaScript bundles and JSON data for pages in memory on the client. This allows fast navigation between pages without reloading the entire page or fetching all data again.

❓ state_output

intermediate

What happens to client cache after a server action updates data?

In a Next.js app using server actions and the App Router, you update data on the server. What happens to the cached page data on the client after this update?

A The client cache is cleared immediately and the page reloads automatically.

B The client cache remains unchanged until the user manually refreshes the page.

C The client cache is automatically invalidated and refetched on next navigation to show updated data.

D The client cache duplicates the old and new data causing inconsistent UI.

💡 Hint

Think about how Next.js keeps UI data fresh after server changes.

Next.js automatically invalidates cached data related to the updated server action. On next navigation or re-render, it refetches fresh data to keep the UI consistent.

📝 Syntax

advanced

Identify the correct way to prefetch a route in Next.js App Router

Which code snippet correctly prefetches a route to warm the client cache before navigation?

NextJS

import { useRouter } from 'next/navigation';

export default function PrefetchExample() {
  const router = useRouter();

  function prefetchPage() {
    // Which line correctly prefetches '/dashboard'?
  }

  return <button onClick={prefetchPage}>Prefetch Dashboard</button>;
}

A router.prefetchPage('/dashboard');

B router.prefetch('/dashboard');

C router.load('/dashboard');

D router.cache('/dashboard');

💡 Hint

Check the official Next.js navigation API for prefetching.

The router.prefetch() method is the correct way to prefetch a route in Next.js App Router, warming the client cache for faster navigation.

🔧 Debug

advanced

Why does client cache not update after navigation in this Next.js code?

Given this Next.js App Router code snippet, why does the client cache not update after navigating to '/profile'?

NextJS

import Link from 'next/link';

export default function Nav() {
  return <Link href="/profile" prefetch={false}>Go to Profile</Link>;
}

A Because the <code>href</code> value is incorrect and causes navigation failure.

B Because the <code>Link</code> component requires an explicit <code>cache</code> prop to update cache.

C Because Next.js disables client cache by default for all links.

D Because <code>prefetch</code> is set to false, Next.js does not cache the page data before navigation.

💡 Hint

Look at the prefetch prop and what it controls.

Setting prefetch={false} disables automatic prefetching and caching of the linked page, so the client cache is not warmed before navigation.

🧠 Conceptual

expert

How does Next.js App Router handle cache consistency with server components and client navigation?

Explain how Next.js App Router ensures cache consistency between server components and client-side navigation when data changes frequently.

A Next.js uses a cache invalidation system that tracks data dependencies and refetches server components on navigation or mutations to keep client cache fresh.

B Next.js relies on browser cache headers only and does not manage cache consistency internally.

C Next.js duplicates server component data in local storage and syncs it periodically with the server.

D Next.js disables caching for server components and always fetches fresh data on every client navigation.

💡 Hint

Think about how Next.js manages data freshness with server components and client cache.

Next.js tracks which data each server component depends on. When data changes, it invalidates related cache entries so client navigation triggers fresh fetches, ensuring UI consistency.