Revalidation strategies (time-based) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using revalidate: 10 in Next.js?

Consider a Next.js page using export const revalidate = 10;. What is the behavior of this page after the first request?

NextJS

export const revalidate = 10;

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

A The page is regenerated at most once every 10 seconds after the first request.

B The page is statically generated once and never updated again.

C The page is regenerated exactly every 10 seconds, regardless of requests.

D The page is regenerated on every request, ignoring the 10 seconds.

💡 Hint

Think about how Next.js uses the revalidate time to update static pages.

Setting revalidate to 10 means Next.js will serve the cached page and regenerate it in the background at most once every 10 seconds after a request triggers regeneration.

📝 Syntax

intermediate

Identify the correct way to set time-based revalidation in Next.js 14

Which of the following code snippets correctly sets a 30-second revalidation time for a Next.js page using the App Router?

A export const revalidate = 30;

B export const revalidate = '30s';

C export const revalidate = true;

D export const revalidate = 30000;

💡 Hint

Check the type and value expected for revalidate in Next.js.

The revalidate export expects a number representing seconds. So 30 means 30 seconds.

🔧 Debug

advanced

Why does the page never update despite revalidate set?

A developer sets export const revalidate = 60; in a Next.js page but notices the page content never updates after deployment. What is the most likely cause?

A The developer forgot to restart the Next.js server after setting revalidate.

B The page is a Server Component and revalidate only works with Client Components.

C The page is inside the <code>app</code> directory but uses <code>getStaticProps</code> which is ignored.

D The revalidate value must be a string, so 60 is ignored.

💡 Hint

Consider how Next.js handles data fetching methods in the App Router.

In the App Router, getStaticProps is not used. Instead, revalidate is set as an export in the page or layout. Using getStaticProps there has no effect.

❓ state_output

advanced

What is the output behavior of ISR with revalidate: 0?

If a Next.js page has export const revalidate = 0;, what will be the behavior when users request the page?

NextJS

export const revalidate = 0;

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

A The page regenerates every 0 seconds, causing a server error.

B The page is generated once at build time and never updates.

C The page regenerates only once every minute regardless of the 0 value.

D The page is regenerated on every request, showing the current time always updated.

💡 Hint

Think about what 0 seconds means for revalidation timing.

A revalidate value of 0 means the page is regenerated on every request, so the content is always fresh.

🧠 Conceptual

expert

How does Next.js handle concurrent requests during revalidation?

When a Next.js page with revalidate: 10 is requested by multiple users at the same time after the cache expires, how does Next.js handle regeneration to avoid multiple builds?

A Next.js regenerates the page separately for each request, causing multiple builds.

B Next.js regenerates the page once and serves the stale cached page to other requests until regeneration finishes.

C Next.js blocks all requests until the page is regenerated, causing delays.

D Next.js serves a 503 error to all requests during regeneration.

💡 Hint

Consider how Next.js optimizes regeneration to reduce server load.

Next.js uses a background regeneration approach where only one regeneration happens, and other requests get the stale page until the new one is ready.