Fetch caching behavior in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding fetch cache option in Next.js Server Components

Consider this Next.js Server Component code snippet that fetches data:

const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(res => res.json());

What is the effect of cache: 'no-store' in this fetch call?

NextJS

const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(res => res.json());

A It caches the response indefinitely and never refetches.

B It caches the response for 60 seconds before refetching.

C It disables caching and fetches fresh data on every request.

D It uses the browser's default caching behavior.

💡 Hint

Think about what 'no-store' means in HTTP caching terms.

The cache: 'no-store' option tells Next.js to never cache the response and always fetch fresh data on every request.

❓ state_output

intermediate

Effect of revalidation time on fetch caching

Given this Next.js fetch call in a Server Component:

const data = await fetch('https://api.example.com/data', { next: { revalidate: 10 } }).then(res => res.json());

What happens when this component is requested multiple times within 10 seconds?

NextJS

const data = await fetch('https://api.example.com/data', { next: { revalidate: 10 } }).then(res => res.json());

A The data is cached indefinitely and never refreshed.

B The data is fetched once and cached for 10 seconds; subsequent requests within 10 seconds use cached data.

C The data is fetched fresh on every request regardless of time.

D The fetch call throws an error because 'revalidate' is invalid.

💡 Hint

Consider what 'revalidate' means in Next.js fetch options.

The revalidate: 10 option caches the response and refreshes it after 10 seconds. Requests within 10 seconds use cached data.

📝 Syntax

advanced

Identify the invalid fetch cache option usage

Which fetch call in Next.js will cause a syntax or runtime error due to incorrect cache option usage?

A fetch('https://api.example.com/data', { cache: 'no-cache' })

B fetch('https://api.example.com/data', { cache: 'reload' })

C fetch('https://api.example.com/data', { cache: 'force-cache' })

D fetch('https://api.example.com/data', { cache: 'invalid-cache' })

💡 Hint

Check the allowed string values for the cache option in fetch.

The cache option accepts only specific strings like 'force-cache', 'reload', 'no-cache', and 'no-store'. 'invalid-cache' is not valid and causes an error.

🔧 Debug

advanced

Why does fetch cache not update after revalidate time?

A developer uses this fetch call in a Next.js Server Component:

const data = await fetch('https://api.example.com/data', { next: { revalidate: 5 } }).then(res => res.json());

But the data never updates even after 10 seconds. What is the most likely cause?

A The API response includes headers that prevent caching, overriding revalidate.

B The 'revalidate' option only works in Client Components, not Server Components.

C The fetch call is missing the 'cache: no-store' option to force refresh.

D The Next.js app is running in development mode where caching is disabled.

💡 Hint

Think about how HTTP headers can affect caching behavior.

If the API sends headers like 'Cache-Control: no-cache', it can prevent Next.js from caching the response despite the revalidate option.

🧠 Conceptual

expert

Choosing fetch cache strategy for dynamic user data

You are building a Next.js app that shows personalized user data that changes frequently. Which fetch cache option is best to ensure users always see fresh data without unnecessary delays?

A Use <code>cache: 'no-store'</code> to always fetch fresh data on every request.

B Use <code>next: { revalidate: 60 }</code> to cache data for 60 seconds before refreshing.

C Use <code>cache: 'force-cache'</code> to cache data indefinitely for performance.

D Use <code>cache: 'reload'</code> to reload data only when the browser cache expires.

💡 Hint

Consider the need for fresh personalized data versus caching benefits.

For frequently changing personalized data, cache: 'no-store' ensures fresh data every time, avoiding stale cache issues.