Full route cache in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable full route caching in Next.js by exporting the correct cache setting.

NextJS

export const cache = [1];

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

A"force-cache"

B"no-store"

C"no-cache"

D"reload"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "no-store" disables caching.

Using "no-cache" only revalidates cache but does not force caching.

Using "reload" forces reload and disables caching.

Using "force-cache" enables full route caching in Next.js, which caches the route output.

2fill in blank

medium

Complete the code to import the cache function from Next.js for full route caching.

NextJS

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

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

ArevalidatePath

BuseRouter

Cfetch

Dcache

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated functions like useRouter or fetch.

Confusing revalidatePath with cache.

The cache function from next/cache is used to enable full route caching.

3fill in blank

hard

Fix the error in the code to correctly export full route cache in Next.js.

NextJS

export const cache = [1];

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

AforceCache

B"force-cache"

Cforce-cache

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted identifiers causes syntax errors.

Using boolean true does not enable caching.

The cache export must be a string "force-cache" to enable full route caching.

4fill in blank

hard

Fill both blanks to create a cached fetch function and export full route cache.

NextJS

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

export const cache = [2];

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

Acache

B"force-cache"

C"no-store"

DrevalidatePath

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing import names or export values.

Using "no-store" disables caching.

Importing cache and exporting "force-cache" enables full route caching.

5fill in blank

hard

Fill all three blanks to create a cached fetch function, export full route cache, and use it in a component.

NextJS

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

export const cache = [2];

export default function Page() {
  const fetchData = [3](() => fetch('/api/data'));
  return <div>Data loaded</div>;
}

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

Acache

B"force-cache"

DrevalidatePath

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and usage.

Not wrapping fetch with cache function.

Import cache, export "force-cache", and wrap fetch with cache() to enable full route caching in the component.