Cache invalidation strategies in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch fresh data by disabling cache in Next.js fetch.

NextJS

const data = await fetch('/api/data', { cache: '[1]' });

Drag options to blanks, or click blank then click option'

A'force-cache'

B'only-if-cached'

C'default'

D'no-store'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' will use cached data instead of fresh data.

Using 'default' may use cache depending on browser or server settings.

Using 'no-store' tells Next.js to fetch fresh data every time, disabling cache.

2fill in blank

medium

Complete the code to revalidate cached data every 60 seconds in Next.js.

NextJS

const data = await fetch('/api/data', { next: { revalidate: [1] } });

Drag options to blanks, or click blank then click option'

A60

B30

C120

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Setting revalidate to 0 disables caching completely.

Choosing too high a number delays cache updates.

Setting revalidate: 60 tells Next.js to refresh the cache every 60 seconds.

3fill in blank

hard

Fix the error in the code to correctly revalidate cache after 10 seconds.

NextJS

const data = await fetch('/api/data', { next: { revalidate: [1] } });

Drag options to blanks, or click blank then click option'

Atrue

B'10s'

C10

D'10'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like '10s' causes a runtime error.

Using boolean true is invalid for revalidate.

The revalidate value must be a number representing seconds, not a string.

4fill in blank

hard

Fill both blanks to create a cache key and set stale-while-revalidate header.

NextJS

export async function GET() {
  const cacheKey = [1];
  return new Response('data', {
    headers: { 'Cache-Control': 'max-age=0, [2]=60' }
  });
}

Drag options to blanks, or click blank then click option'

A'user-data'

B'stale-while-revalidate'

C'max-age'

D'no-cache'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'max-age' in place of 'stale-while-revalidate' changes cache behavior.

Using 'no-cache' disables caching entirely.

The cache key is a string like 'user-data'. The header 'stale-while-revalidate=60' allows serving stale data while revalidating.

5fill in blank

hard

Fill all three blanks to create a Next.js fetch with cache disabled, revalidate after 30 seconds, and use a custom cache key.

NextJS

const data = await fetch('/api/data', {
  cache: [1],
  next: { revalidate: [2] },
  headers: { 'x-cache-key': [3] }
});

Drag options to blanks, or click blank then click option'

A'no-store'

B30

C'custom-key-123'

D'force-cache'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' enables caching, which is not desired here.

Setting revalidate to 0 disables revalidation.

Providing a non-string for the cache key header causes errors.

Use 'no-store' to disable cache, 30 seconds for revalidation, and a string like 'custom-key-123' as a custom cache key header.