Cache debugging tools in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js cache debugging tool.

NextJS

import { [1] } from 'next/cache';

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

Aunstable_cache

BcacheDebugger

CuseCache

DcacheTool

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent import like 'cacheDebugger'.

Confusing hook names like 'useCache'.

The unstable_cache function is the official Next.js caching tool import.

2fill in blank

medium

Complete the code to wrap a function with Next.js cache debugging.

NextJS

const cachedFunction = [1](() => {
  return fetch('/api/data');
});

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

Aunstable_cache

BcacheDebugger

CuseCache

DcacheWrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like 'cacheDebugger'.

Trying to use hooks like 'useCache' outside React components.

The unstable_cache function wraps your function to enable caching.

3fill in blank

hard

Fix the error in the cache debugging function call.

NextJS

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

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

AstaleTime

Btimeout

CcacheTime

Drevalidate

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect option names like 'timeout' or 'cacheTime'.

Confusing cache options with React state options.

The correct option to set cache duration is revalidate in seconds.

4fill in blank

hard

Fill both blanks to create a cache key part and set revalidate time.

NextJS

const cachedData = unstable_cache(fetchData, { keyParts: ["[1]"], revalidate: [2] });

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

A'user-data'

B120

C60

D'cache-key'

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers as keys or strings as revalidate values.

Mixing up cache key and revalidate values.

Use a descriptive string like 'user-data' as the key part and set revalidate to 60 seconds.

5fill in blank

hard

Fill all three blanks to define a cached fetch with keyParts, revalidate, and tags.

NextJS

const cachedFetch = unstable_cache(fetchData, { keyParts: ["[1]"], revalidate: [2], tags: ["[3]"] });

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

A'api-fetch'

B30

C'api-tag'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect types for options.

Forgetting to add tags.

Use 'api-fetch' as the key part, set revalidate to 30 seconds, and use 'api-tag' as the tag.