Fetch caching behavior in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data with caching disabled.

NextJS

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

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

Aforce-cache

Breload

Cdefault

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' which caches data aggressively.

Using 'default' which may use cached data.

Using 'reload' which is not a valid cache option in Next.js fetch.

Using 'no-store' disables caching and always fetches fresh data.

2fill in blank

medium

Complete the code to fetch data with caching enabled and revalidation after 60 seconds.

NextJS

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

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

A120

B60

C30

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 which disables caching.

Using 30 or 120 which are valid but not the requested 60 seconds.

Setting revalidate: 60 means the cached data is fresh for 60 seconds before re-fetching.

3fill in blank

hard

Fix the error in the fetch call to correctly disable caching.

NextJS

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

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

A'no-store'

B'reload'

C'no-cache'

D'default'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-cache' which still allows caching with validation.

Using 'reload' which is not a valid cache option here.

Only 'no-store' fully disables caching in Next.js fetch.

4fill in blank

hard

Fill both blanks to fetch data with cache enabled and revalidate every 10 seconds.

NextJS

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

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

Aforce-cache

Bno-store

C10

D60

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching.

Setting revalidate to 60 instead of 10.

Use 'force-cache' to enable caching and revalidate: 10 to refresh cache every 10 seconds.

5fill in blank

hard

Fill all three blanks to fetch data with no caching and a custom header.

NextJS

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

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

Ano-store

BAuthorization

CBearer token123

Dforce-cache

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' which enables caching.

Missing the header key or value.

Use 'no-store' to disable cache, and add an Authorization header with a bearer token.