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.

Practice

1. What does setting the revalidate property in getStaticProps do in Next.js?

easy

A. It tells Next.js to update the static page automatically after the specified seconds.

B. It disables static generation and forces server-side rendering.

C. It caches the page forever without any updates.

D. It triggers a client-side fetch to update the page content.

Solution

1. Step 1: Understand revalidate role in getStaticProps

   The revalidate property sets a time interval in seconds for Next.js to regenerate the static page in the background.

2. Step 2: Effect of setting revalidate

   After the specified time, Next.js updates the static page automatically without manual rebuilds or disabling static generation.

3. Final Answer:

   It tells Next.js to update the static page automatically after the specified seconds. -> Option A

4. Quick Check:

   Time-based revalidation = automatic page update [OK]

Hint: Remember: revalidate sets auto-update time in seconds [OK]

Common Mistakes:

• Thinking revalidate disables static generation
• Confusing revalidate with client-side fetching
• Assuming revalidate caches forever

2. Which of the following is the correct way to set a 10-second revalidation in getStaticProps?

easy

A. export async function getStaticProps() { return { props: {}, revalidate: null } }

B. export async function getStaticProps() { return { props: {}, revalidate: '10' } }

C. export async function getStaticProps() { return { props: {}, revalidate: true } }

D. export async function getStaticProps() { return { props: {}, revalidate: 10 } }

Solution

1. Step 1: Check the type of revalidate

   The revalidate value must be a number representing seconds.

2. Step 2: Validate each option's syntax

   export async function getStaticProps() { return { props: {}, revalidate: 10 } } uses a number 10 correctly. export async function getStaticProps() { return { props: {}, revalidate: '10' } } uses a string '10' which is invalid. The other options use boolean and null, which are incorrect types.

3. Final Answer:

   export async function getStaticProps() { return { props: {}, revalidate: 10 } } -> Option D

4. Quick Check:

   revalidate must be a number [OK]

Hint: Use a number for revalidate seconds, not string or boolean [OK]

Common Mistakes:

• Using string instead of number for revalidate
• Setting revalidate to true or null
• Forgetting to return revalidate inside the returned object

3. Given this code snippet in getStaticProps:

export async function getStaticProps() {
  return {
    props: { time: Date.now() },
    revalidate: 5
  }
}

What will happen if you visit the page multiple times within 3 seconds?

medium

A. The page will show the same time value for all visits within 3 seconds.

B. The page will update time on every visit regardless of time.

C. The page will throw an error because revalidate is too short.

D. The page will never update the time value.

Solution

1. Step 1: Understand revalidate timing

   The revalidate: 5 means Next.js regenerates the page at most every 5 seconds.

2. Step 2: Behavior within 3 seconds

   Visiting within 3 seconds means the cached page is served with the same time value because regeneration hasn't happened yet.

3. Final Answer:

   The page will show the same time value for all visits within 3 seconds. -> Option A

4. Quick Check:

   Revalidate interval controls update frequency [OK]

Hint: Page updates only after revalidate seconds pass [OK]

Common Mistakes:

• Expecting page to update on every visit
• Thinking revalidate causes errors if too small
• Assuming page never updates after first build

4. You set revalidate: 0 in getStaticProps. What is the problem with this code?

medium

A. It causes the page to never render.

B. It caches the page forever without updates.

C. It disables static generation and causes a build error.

D. It causes the page to regenerate on every request, similar to server-side rendering.

Solution

1. Step 1: Understand revalidate: 0 meaning

   Setting revalidate to 0 disables Incremental Static Regeneration (ISR). The page is generated at build time and cached forever without background regeneration.

2. Step 2: Effect on page behavior

   This results in no automatic updates, which is the problem if revalidation was intended, behaving like static generation without ISR.

3. Final Answer:

   It caches the page forever without updates. -> Option B

4. Quick Check:

   revalidate 0 = no ISR, cache forever [OK]

Hint: revalidate: 0 caches forever, no updates [OK]

Common Mistakes:

• Thinking revalidate: 0 regenerates on every request
• Believing it causes a build error
• Assuming it prevents the page from rendering

5. You want a page to update its static content every 60 seconds but only if the content has changed. Which Next.js feature combined with revalidate helps achieve this efficiently?

hard

A. Use getServerSideProps instead of getStaticProps.

B. Use revalidate: false to disable updates and manually rebuild.

C. Use revalidate: 60 with Incremental Static Regeneration (ISR) and conditional data fetching.

D. Set revalidate: 0 to regenerate on every request.

Solution

1. Step 1: Understand ISR with revalidate

   Incremental Static Regeneration (ISR) allows pages to update after a set time without full rebuilds.

2. Step 2: Combine with conditional data fetching

   Fetching data conditionally inside getStaticProps ensures updates only when content changes, saving resources.

3. Final Answer:

   Use revalidate: 60 with Incremental Static Regeneration (ISR) and conditional data fetching. -> Option C

4. Quick Check:

   ISR + revalidate = efficient timed updates [OK]

Hint: ISR with revalidate controls timed updates smartly [OK]

Common Mistakes:

• Using getServerSideProps which disables static caching
• Setting revalidate to false which is invalid
• Using revalidate 0 causing regen every request