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.

Practice

1. In Next.js, what does setting cache: "force-cache" in a fetch call do?

easy

A. It returns cached data if available, otherwise fetches from the network.

B. It always fetches fresh data from the network, ignoring cache.

C. It disables caching completely for the fetch request.

D. It caches the response only for the current session.

Solution

1. Step 1: Understand the cache option "force-cache"

   This option tells Next.js to use cached data if it exists, avoiding a network request.

2. Step 2: Behavior when cache is missing

   If no cached data is found, it fetches fresh data and caches it for future use.

3. Final Answer:

   It returns cached data if available, otherwise fetches from the network. -> Option A

4. Quick Check:

   force-cache = use cache first [OK]

Hint: force-cache means use cache if present, else fetch fresh [OK]

Common Mistakes:

• Confusing force-cache with no-store which disables cache
• Thinking force-cache always fetches fresh data
• Assuming force-cache caches only for session

2. Which of the following is the correct syntax to fetch data with no caching in Next.js?

easy

A. fetch(url, { cache: "force-cache" })

B. fetch(url, { cache: "default" })

C. fetch(url, { cache: "reload" })

D. fetch(url, { cache: "no-store" })

Solution

1. Step 1: Identify the option for no caching

   The no-store cache mode disables caching and always fetches fresh data.

2. Step 2: Verify syntax correctness

   The syntax fetch(url, { cache: "no-store" }) is valid and correctly disables cache.

3. Final Answer:

   fetch(url, { cache: "no-store" }) -> Option D

4. Quick Check:

   no-store disables cache [OK]

Hint: Use cache: "no-store" to disable caching [OK]

Common Mistakes:

• Using "reload" which is not a valid cache option in Next.js fetch
• Confusing "force-cache" with no caching
• Omitting the cache option entirely

3. What will be the behavior of this Next.js fetch call?

await fetch('/api/data', { cache: 'no-cache' })

medium

A. Returns cached data if available, but revalidates in background.

B. Always fetches fresh data and updates the cache.

C. Ignores cache and never stores the response.

D. Fetches from cache only, never from network.

Solution

1. Step 1: Understand the 'no-cache' mode

   This mode returns cached data if available but triggers a background fetch to update the cache.

2. Step 2: Confirm behavior in Next.js fetch

   Next.js uses this to balance speed and freshness by serving cache immediately and updating it asynchronously.

3. Final Answer:

   Returns cached data if available, but revalidates in background. -> Option A

4. Quick Check:

   no-cache = cache then revalidate [OK]

Hint: no-cache serves cache then refreshes in background [OK]

Common Mistakes:

• Thinking no-cache disables cache completely
• Assuming no-cache never uses cached data
• Confusing no-cache with no-store

4. You wrote this fetch call in Next.js:

fetch('/api/data', { cache: 'reload' })

But it throws an error. What is the problem?

medium

A. You must use async/await with fetch.

B. You forgot to add method: 'GET' in options.

C. "reload" is not a valid cache option in Next.js fetch.

D. The URL must be absolute, not relative.

Solution

1. Step 1: Check valid cache options in Next.js

   Next.js fetch supports "force-cache", "no-store", "no-cache", and "default" but not "reload".

2. Step 2: Identify error cause

   Using "reload" causes a syntax or runtime error because it's unsupported.

3. Final Answer:

   "reload" is not a valid cache option in Next.js fetch. -> Option C

4. Quick Check:

   Invalid cache option = error [OK]

Hint: Check cache option spelling and validity [OK]

Common Mistakes:

• Assuming reload is valid from browser fetch API
• Ignoring error messages about invalid options
• Thinking method or URL causes this error

5. You want to fetch user data in Next.js and ensure it is always fresh but also want to avoid unnecessary network requests if the data was fetched less than 10 seconds ago. Which caching strategy should you use?

hard

A. Use cache: 'no-store' and implement a custom timer to refetch every 10 seconds.

B. Use cache: 'no-cache' with next: { revalidate: 10 } option.

C. Use cache: 'force-cache' with next: { revalidate: 10 } option.

D. Use cache: 'default' without revalidation.

Solution

1. Step 1: Understand requirement for freshness and caching

   You want fresh data but avoid fetching more than once every 10 seconds.

2. Step 2: Analyze caching options

   cache: 'no-cache' serves cached data but revalidates in background; next: { revalidate: 10 } tells Next.js to re-fetch after 10 seconds.

3. Step 3: Compare with other options

   no-store disables cache completely, forcing fetch every time; force-cache caches indefinitely; default has no revalidation control.

4. Final Answer:

   Use cache: 'no-cache' with next: { revalidate: 10 } option. -> Option B

5. Quick Check:

   no-cache + revalidate = fresh every 10s [OK]

Hint: Combine no-cache with revalidate for timed freshness [OK]

Common Mistakes:

• Using no-store causes always fresh but no caching
• Using force-cache ignores revalidate timing
• Forgetting to add revalidate option