Opting out of caching in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to disable caching for a Next.js Server Component.

NextJS

export const revalidate = [1];

export default function Page() {
  return <h1>No caching here!</h1>;
}

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

A0

Bfalse

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'false' instead of 0 does not disable caching.

Setting 'true' enables caching, not disables.

Setting revalidate = 0 tells Next.js not to cache the page and always fetch fresh data.

2fill in blank

medium

Complete the code to disable caching for a Next.js API route.

NextJS

export const GET = async () => {
  return new Response('No cache', {
    headers: {
      'Cache-Control': [1]
    }
  });
};

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

A'public, max-age=3600'

B'no-store'

C'private, max-age=0'

D'max-age=0'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'max-age=0' may still allow some caching.

Using 'public' allows caching, which is not desired here.

Using 'no-store' in the Cache-Control header tells the browser and CDN not to cache the response.

3fill in blank

hard

Fix the error in disabling caching for a Next.js page by completing the export.

NextJS

export const [1] = 0;

export default function Page() {
  return <p>Fresh data always</p>;
}

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

AnoCache

Bcache

Crevalidate

DcacheControl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cache' or 'cacheControl' are not recognized exports.

Using 'noCache' is not a valid Next.js export.

The correct export to control caching in Next.js pages is revalidate.

4fill in blank

hard

Fill both blanks to disable caching and set a custom header in a Next.js API route.

NextJS

export const GET = async () => {
  return new Response('No cache', {
    headers: {
      'Cache-Control': [1],
      'Pragma': [2]
    }
  });
};

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

A'no-store'

B'no-cache'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'no-store' and 'no-cache' values.

Omitting the 'Pragma' header for older clients.

Setting 'Cache-Control' to 'no-store' disables caching, and 'Pragma' to 'no-cache' is for backward compatibility with HTTP/1.0 caches.

5fill in blank

hard

Fill all three blanks to create a Next.js page that opts out of caching and fetches fresh data.

NextJS

export const [1] = [2];

export default async function Page() {
  const res = await fetch('https://api.example.com/data', { cache: [3] });
  const data = await res.json();
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

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

Arevalidate

B0

C'no-store'

D'force-cache'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' in fetch options caches data.

Setting revalidate to true or false instead of 0.

Setting revalidate = 0 disables Next.js page caching. Passing { cache: 'no-store' } to fetch disables fetch caching, ensuring fresh data.