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.

Practice

1. What is the main purpose of cache debugging tools in Next.js applications?

easy

A. To improve the styling of components

B. To manage user authentication

C. To find and fix issues related to stored or cached data

D. To deploy the application to production

Solution

1. Step 1: Understand cache role in Next.js

   Cache stores data temporarily to speed up app performance but can cause stale data issues.

2. Step 2: Identify purpose of debugging tools

   Cache debugging tools help find and fix problems with this stored data to ensure fresh and correct information.

3. Final Answer:

   To find and fix issues related to stored or cached data -> Option C

4. Quick Check:

   Cache debugging = find/fix cache issues [OK]

Hint: Cache debugging = fixing stored data problems [OK]

Common Mistakes:

• Confusing cache debugging with styling or deployment
• Thinking cache debugging manages user login
• Assuming cache debugging improves UI appearance

2. Which of the following is the correct way to use React cache in Next.js for debugging purposes?

easy

A. import { cache } from 'react'; cache(async () => {});

B. import { clearCache } from 'next/cache'; clearCache();

C. import { resetCache } from 'react'; resetCache();

D. import { flushCache } from 'next'; flushCache();

Solution

1. Step 1: Recall React cache API

   React provides a cache function to memoize async functions.

2. Step 2: Match correct import and method

   Only import { cache } from 'react'; cache(async () => {}); is valid syntax for using cache.

3. Final Answer:

   import { cache } from 'react'; cache(async () => {}); -> Option A

4. Quick Check:

   React cache usage = cache(asyncFn) [OK]

Hint: Use React's cache(asyncFn) to memoize [OK]

Common Mistakes:

• Using non-existent functions like clearCache or resetCache
• Importing from wrong modules like 'next/cache'
• Calling methods that do not exist on cache object

3. Given this Next.js code snippet using React cache:

import { cache } from 'react';

const fetchData = cache(async () => {
  console.log('Fetching data');
  return 'data';
});

await fetchData();
await fetchData();

What will be logged to the console?

medium

A. Fetching data
Fetching data

B. Error: cache is not a function

C. No output

D. Fetching data

Solution

1. Step 1: Understand React cache behavior

   React's cache wraps the async function to memoize its result, so it runs only once.

2. Step 2: Analyze console logs

   On first call, 'Fetching data' logs; second call returns cached result without logging.

3. Final Answer:

   Fetching data -> Option D

4. Quick Check:

   cache memoizes function, logs once [OK]

Hint: Cached function logs only once on first call [OK]

Common Mistakes:

• Assuming function runs and logs every call
• Thinking cache is not a function error
• Expecting no output at all

4. You notice stale data in your Next.js app despite clearing React cache with cache.clear(). What is a likely cause?

medium

A. You forgot to restart the Next.js server

B. Browser DevTools cache is not cleared

C. The cache.clear() method does not exist

D. React cache automatically clears on every render

Solution

1. Step 1: Understand cache layers

   Besides React cache, browsers also cache network responses and assets.

2. Step 2: Identify stale data cause

   If browser cache is not cleared, stale data may persist despite clearing React cache.

3. Final Answer:

   Browser DevTools cache is not cleared -> Option B

4. Quick Check:

   Browser cache can cause stale data [OK]

Hint: Clear browser cache in DevTools to fix stale data [OK]

Common Mistakes:

• Assuming cache.clear() does not exist
• Thinking React cache clears every render
• Forgetting to restart server is the cause

5. You want to debug cache issues in a Next.js app that uses React cache and server actions. Which combination of tools and steps is best?

hard

A. Use React's cache.clear(), add console logs in server actions, and clear browser cache

B. Only restart the Next.js server and rely on automatic cache clearing

C. Use browser DevTools network tab without modifying code

D. Disable React cache permanently in production

Solution

1. Step 1: Clear React cache programmatically

   Use cache.clear() to reset cached data in React functions.

2. Step 2: Add console logs in server actions

   Logging helps track when server actions run and cache updates happen.

3. Step 3: Clear browser cache

   Browser cache can hold stale data; clearing it ensures fresh data loads.

4. Final Answer:

   Use React's cache.clear(), add console logs in server actions, and clear browser cache -> Option A

5. Quick Check:

   Combine cache clearing, logging, and browser cache clearing [OK]

Hint: Combine cache.clear(), logs, and browser cache clear [OK]

Common Mistakes:

• Relying only on server restart
• Ignoring browser cache effects
• Disabling cache permanently without debugging