Revalidation patterns in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a page to revalidate every 60 seconds.

NextJS

export const revalidate = [1];

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

A60

B'60'

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a number for revalidate.

Setting revalidate to true or false instead of a number.

The revalidate export expects a number representing seconds for ISR (Incremental Static Regeneration).

2fill in blank

medium

Complete the code to fetch data with revalidation set to 10 seconds inside a Next.js Server Component.

NextJS

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

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

A'no-store'

B'default'

C'force-cache'

D'force-cache', revalidate: 10

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching and revalidation.

Trying to pass revalidate inside fetch options directly.

Using 'force-cache' cache mode allows Next.js to apply the revalidate setting for ISR.

3fill in blank

hard

Fix the error in the fetch call to enable revalidation every 30 seconds.

NextJS

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

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

A'default'

B'no-store'

C'no-cache'

D'force-cache'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching and revalidation.

Using invalid options like 'default' or 'no-cache'.

The 'force-cache' cache mode allows Next.js to use the revalidate time set in the page or layout.

4fill in blank

hard

Fill both blanks to create a fetch call that caches data and revalidates every 15 seconds.

NextJS

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

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

A'force-cache'

B'no-store'

C15

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching.

Setting revalidate to a string instead of a number.

Using 'force-cache' with next.revalidate set to 15 enables caching with revalidation every 15 seconds.

5fill in blank

hard

Fill all three blanks to create a Next.js page that revalidates every 20 seconds and fetches data with caching.

NextJS

export const revalidate = [1];

export default async function Page() {
  const data = await fetch('/api/info', { cache: '[2]', next: { revalidate: [3] } });
  return <pre>{JSON.stringify(data)}</pre>;
}

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

A20

B'force-cache'

D'no-store'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching and revalidation.

Mismatching revalidate times between export and fetch.

The page sets revalidate to 20 seconds. The fetch uses 'force-cache' with next.revalidate also set to 20 to enable ISR caching.