Full route cache in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of a Next.js page using full route cache with revalidation set to 10 seconds?

Consider a Next.js page that uses export const revalidate = 10; for full route caching. What happens when a user visits the page multiple times within 10 seconds?

NextJS

export const revalidate = 10;

export default function Page() {
  const time = new Date().toISOString();
  return <p>Current time: {time}</p>;
}

A The page shows the same time for all visits within 10 seconds, then updates after 10 seconds.

B The page updates the time on every visit regardless of the 10 seconds setting.

C The page never updates the time once cached, even after 10 seconds.

D The page throws an error because revalidate cannot be a number.

💡 Hint

Think about how Next.js uses the revalidate property to control cache duration.

Setting revalidate = 10 tells Next.js to cache the page for 10 seconds. Within that time, the cached page is served. After 10 seconds, Next.js regenerates the page on the next request.

📝 Syntax

intermediate

Which option correctly enables full route caching with a 60-second revalidation in Next.js?

Choose the correct way to enable full route caching with a 60-second revalidation period in a Next.js page.

A export const cache = true;

B export const revalidate = 60;

C export const revalidate = '60';

D export const cache = { revalidate: 60 };

💡 Hint

Check the official Next.js syntax for revalidation.

The correct syntax to set full route cache revalidation is export const revalidate = 60;. Other options are either invalid or incomplete.

🔧 Debug

advanced

Why does this Next.js page update on every request despite revalidate set to 30?

Given the code below, the page shows a new time on every request despite revalidate set to 30. What is the most likely cause?

NextJS

export const revalidate = 30;

export default function Page() {
  const time = new Date().toISOString();
  return <p>Time: {time}</p>;
}

A The revalidate value must be a string, not a number.

B The page is missing a fetch call to trigger revalidation.

C The page is a client component, so revalidate has no effect.

D The revalidate property only works in API routes, not pages.

💡 Hint

Consider the difference between client and server components in Next.js caching.

Full route caching with revalidate only works on server components. If the page is a client component, caching does not apply.

🧠 Conceptual

advanced

What happens when you set export const revalidate = 0; in a Next.js page?

In Next.js, what is the effect of setting export const revalidate = 0; in a page component?

A The page is regenerated on every request (no caching).

B The page throws a runtime error because 0 is invalid.

C The page is cached indefinitely and never revalidated.

D The page is cached for 0 seconds, then revalidated immediately after rendering.

💡 Hint

Think about what zero seconds means for caching duration.

Setting revalidate = 0 disables caching, so the page regenerates on every request.

❓ state_output

expert

What is the rendered output after 15 seconds if a Next.js page uses full route cache with revalidate=20 and shows current time?

A Next.js page exports export const revalidate = 20; and renders the current time. The page is first requested at 12:00:00 and cached. What time will the page show if requested again at 12:00:15?

NextJS

export const revalidate = 20;

export default function Page() {
  const time = new Date().toISOString();
  return <p>Time: {time}</p>;
}

A The time from 12:00:20 because revalidation happens early.

B The current time at 12:00:15 (fresh render).

C An error because the cache is still valid.

D The time from the first request at 12:00:00 (cached).

💡 Hint

Recall how revalidation timing affects cached page output.

The page is cached for 20 seconds, so a request at 15 seconds returns the cached output from 12:00:00.