Why caching is central to Next.js - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js caching function.

NextJS

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

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

AuseState

Bcache

CgetServerSideProps

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing React hooks like useState or useEffect instead of caching.

The cache function from next/cache helps store data to speed up page rendering.

2fill in blank

medium

Complete the code to wrap a function with Next.js caching.

NextJS

export const getData = [1](() => {
  return fetch('https://api.example.com/data');
});

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

Acache

BuseState

CuseEffect

DgetServerSideProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using React hooks which are not for caching in Next.js.

Wrapping the function with cache stores its result to avoid repeated fetching.

3fill in blank

hard

Fix the error in the caching usage by completing the code.

NextJS

const data = await [1]();

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

AgetData

Bcache

CfetchData

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the cache function instead of the cached function.

You must call the cached function getData to get the cached result.

4fill in blank

hard

Fill the blank to create a cached fetch with revalidation time.

NextJS

export const getData = cache(() => fetch('https://api.example.com/data'), { revalidate: [1] });

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

AstaleWhileRevalidate

Bfalse

C60

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing boolean values with caching strategy names.

The revalidate time sets cache duration in seconds.

5fill in blank

hard

Fill the blanks to create a cached function with a revalidation.

NextJS

export const getUser = cache(async (id) => {
  const res = await fetch(`/api/user/$[1]`);
  return res.json();
}, { revalidate: [2] });

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

Aid

B120

C`user-${id}`

DuserId

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names or static keys.

The function uses id to fetch user data, sets revalidation to 120 seconds. Next.js automatically generates unique cache keys based on the id argument.