Cache debugging tools in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding cache behavior in Next.js Server Components

Consider a Next.js Server Component that fetches data with caching enabled. What will be the output if the cache is stale but the component is rendered again?

NextJS

export default async function Page() {
  const data = await fetch('https://api.example.com/data', { cache: 'force-cache' }).then(res => res.json());
  return <pre>{JSON.stringify(data)}</pre>;
}

A The component shows the cached data without fetching new data.

B The component fetches fresh data ignoring the cache and updates the output.

C The component throws a runtime error due to stale cache.

D The component shows empty data because the cache is stale.

💡 Hint

Remember that 'force-cache' uses cached data if available, even if stale.

Using cache: 'force-cache' tells Next.js to serve cached data if it exists, without revalidating. So stale data is shown until cache is cleared or invalidated.

🔧 Debug

intermediate

Identifying cache invalidation issues in Next.js

You notice your Next.js app does not update data after deployment despite changes on the API. Which cache debugging tool helps you verify if the cache is causing this?

A Using the React DevTools Profiler to check component renders.

B Using the Next.js <code>revalidatePath</code> server action to force cache refresh.

C Using the Next.js built-in <code>next dev</code> server with cache disabled.

D Using the browser's Network tab to check if requests return 304 Not Modified.

💡 Hint

Look for HTTP status codes indicating cache hits or misses.

The browser's Network tab shows if the response is served from cache (304 Not Modified) or fetched fresh (200 OK). This helps identify caching issues.

📝 Syntax

advanced

Correct usage of cache control in Next.js fetch

Which option correctly sets the fetch cache to revalidate every 10 seconds in a Next.js Server Component?

A fetch(url, { cache: 'force-cache', next: { revalidate: 10 } })

B fetch(url, { next: { revalidate: 10 } })

C fetch(url, { cache: 'no-store', next: { revalidate: 10 } })

D fetch(url, { cache: 'no-cache', next: { revalidate: 10 } })

💡 Hint

The 'next' option controls revalidation timing.

Setting next: { revalidate: 10 } tells Next.js to cache the response and revalidate it every 10 seconds. The 'cache' option is optional here.

❓ state_output

advanced

Effect of cache on component state updates

In a Next.js app, a client component fetches data from an API and caches it. If the API data changes but the cache is not invalidated, what will the component display after a user interaction that triggers a re-render?

NextJS

'use client';
import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data', { cache: 'force-cache' })
      .then(res => res.json())
      .then(setData);
  }, []);

  return <div>{data ? data.value : 'Loading...'}</div>;
}

A The component shows the old cached data despite re-render.

B The component shows the updated API data after re-render.

C The component shows 'Loading...' indefinitely.

D The component crashes with a fetch error.

💡 Hint

Consider how 'force-cache' affects fetch results on re-render.

Using cache: 'force-cache' means the fetch returns cached data even if the API changed, so the component shows stale data after re-render.

🧠 Conceptual

expert

Diagnosing cache-related stale data in Next.js with ISR

You deployed a Next.js app using Incremental Static Regeneration (ISR) with revalidate: 60. After updating content in the CMS, users still see old data for several minutes. Which is the most accurate explanation?

A The browser cache is ignoring cache headers and serving old pages.

B The Next.js cache is broken and requires manual clearing after CMS updates.

C ISR revalidates pages only after the first request post revalidate time, so stale data can persist until then.

D ISR immediately updates all pages on CMS content change, so this is a deployment bug.

💡 Hint

Think about how ISR timing works with user requests.

ISR updates static pages only when a request comes after the revalidate interval. Until then, users see the cached static page.