Data cache behavior in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Next.js cache data in Server Components?

Consider a Next.js Server Component that fetches data from an API using fetch with cache: 'force-cache'. What happens when the component is rendered multiple times within 10 seconds?

NextJS

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

A The data is fetched once and cached indefinitely; subsequent renders use the cached data.

B The data is cached only on the client side, not on the server.

C The data is cached indefinitely and never refetched unless the server restarts.

D The data is fetched every time the component renders, ignoring the cache option.

💡 Hint

Think about how cache: 'force-cache' enables server-side caching.

Using cache: 'force-cache' tells Next.js to cache the fetched data on the server indefinitely. Repeated renders use the cached data instead of refetching.

❓ state_output

intermediate

What is the output when using stale-while-revalidate caching?

Given this Next.js Server Component code snippet, what will the user see immediately after the first render if the cache is stale?

NextJS

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

A The user sees empty data until the cache expires.

B The user waits for fresh data to load before anything is displayed.

C The user sees an error because stale-while-revalidate is not supported in Next.js fetch.

D The user sees the cached data immediately, and the data is updated in the background for the next render.

💡 Hint

Recall how stale-while-revalidate works in caching strategies.

With { next: { revalidate: 30 } }, Next.js serves cached data immediately even if stale, then fetches fresh data in the background to update the cache for future requests.

🔧 Debug

advanced

Why does data not update despite revalidating in Next.js?

Look at this Next.js Server Component fetching data with revalidate: 5. The data does not update after 5 seconds as expected. What is the likely cause?

NextJS

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

A The <code>revalidate</code> option is misspelled and ignored by Next.js.

B Next.js requires <code>cache: 'no-store'</code> to enable revalidation.

C The API response is cached by a CDN or proxy, preventing fresh data from reaching Next.js.

D The component must be a Client Component to use <code>revalidate</code>.

💡 Hint

Consider external factors affecting data freshness beyond Next.js settings.

If a CDN or proxy caches the API response, Next.js fetches stale data despite revalidate. The cache must be cleared or bypassed at the API level.

🧠 Conceptual

advanced

How does Next.js handle caching in Client Components?

Which statement best describes data caching behavior when fetching data inside a Next.js Client Component?

A Client Components automatically cache fetch requests on the server like Server Components.

B Client Components do not cache fetch requests by default; each fetch runs fresh unless manually cached.

C Client Components cache fetch requests indefinitely in the browser cache.

D Client Components use Next.js <code>revalidate</code> option to control caching.

💡 Hint

Think about where Client Components run and how caching works there.

Client Components run in the browser and do not use Next.js server caching. Fetch requests run fresh unless the developer implements caching manually.

📝 Syntax

expert

Which fetch option correctly enables incremental static regeneration in Next.js?

Choose the correct fetch option syntax to enable ISR with a 60-second revalidation in a Next.js Server Component.

A fetch(url, { next: { revalidate: 60 } })

B fetch(url, { cache: 'no-store', revalidate: 60 })

C fetch(url, { revalidate: 60 })

D fetch(url, { cache: 'force-cache', revalidate: 60 })

💡 Hint

Check the official Next.js fetch options for ISR.

The correct syntax to enable ISR is to pass revalidate inside the next option object: { next: { revalidate: 60 } }.