Revalidation patterns in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using revalidate in Next.js getStaticProps?

Consider a Next.js page using getStaticProps with revalidate: 10. What is the behavior of the page after deployment?

NextJS

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

export default function Page({ time }) {
  return <p>Time: {time}</p>;
}

A The page is statically generated once and never updated.

B The page is regenerated at most once every 10 seconds when requested.

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

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

💡 Hint

Think about how Next.js handles Incremental Static Regeneration with revalidate.

With revalidate: 10, Next.js serves the static page and regenerates it in the background at most once every 10 seconds when a request comes in. It does not regenerate on every request or on a fixed timer.

📝 Syntax

intermediate

Which Next.js data fetching method supports revalidate for automatic page updates?

Select the Next.js data fetching method that supports the revalidate option for Incremental Static Regeneration.

A getInitialProps

B getServerSideProps

C getStaticProps

D API routes

💡 Hint

Only one method generates static pages with revalidation.

getStaticProps supports revalidate to enable Incremental Static Regeneration. getServerSideProps runs on every request and does not use revalidate.

🔧 Debug

advanced

Why does a Next.js page with revalidate not update after 10 seconds?

A developer sets revalidate: 10 in getStaticProps but the page content never updates after deployment. What is the most likely cause?

NextJS

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return {
    props: { data },
    revalidate: 10
  };
}

export default function Page({ data }) {
  return <pre>{JSON.stringify(data)}</pre>;
}

A The API response is cached and does not change, so the page looks static.

B The page needs a manual rebuild to update content despite revalidate.

C The <code>revalidate</code> option must be a string, not a number.

D The <code>getStaticProps</code> function is missing a <code>fetch</code> call.

💡 Hint

Consider what happens if the data source does not change.

If the API data does not change, the regenerated page will look the same, so it appears not to update. The revalidate option is correctly used as a number.

🧠 Conceptual

advanced

How does Next.js handle concurrent requests during page revalidation?

When multiple users request a page that is due for revalidation, how does Next.js handle regenerating the page?

A Next.js serves the old page to all requests and regenerates the page once in the background.

B Next.js returns an error to all requests during regeneration.

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

D Next.js regenerates the page multiple times concurrently for each request.

💡 Hint

Think about user experience during regeneration.

Next.js serves the existing static page to all requests while regenerating the page once in the background to avoid delays or errors.

❓ state_output

expert

What is the output of this Next.js page with revalidate and dynamic data?

Given the code below, what will the page display if requested twice with a 15-second gap?

NextJS

export async function getStaticProps() {
  return {
    props: { timestamp: Date.now() },
    revalidate: 10
  };
}

export default function Page({ timestamp }) {
  return <p>Timestamp: {timestamp}</p>;
}

A The page throws an error because Date.now() is used in getStaticProps.

B Both requests show the same timestamp from the first build.

C Both requests show the current time at request, ignoring revalidate.

D The first request shows the initial timestamp; the second shows a new timestamp updated after 10 seconds.

💡 Hint

Remember how revalidate controls regeneration timing.

The first request serves the static page with the initial timestamp. After 10 seconds, the next request triggers regeneration, so the second request shows an updated timestamp.

Practice

1. What does the revalidate export in Next.js control?

easy

A. How often a cached page updates after initial generation

B. The maximum number of pages to cache

C. The delay before a page is first generated

D. The priority of server-side rendering

Solution

1. Step 1: Understand the role of revalidate

   The revalidate export sets the time in seconds for Next.js to update a cached page after it was first generated.

2. Step 2: Compare options with this behavior

   Only How often a cached page updates after initial generation correctly describes this update frequency control. Other options describe unrelated concepts.

3. Final Answer:

   How often a cached page updates after initial generation -> Option A

4. Quick Check:

   Revalidate controls update frequency = D [OK]

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

Common Mistakes:

• Confusing revalidate with cache size
• Thinking revalidate delays first page generation
• Mixing revalidate with rendering priority

2. Which of the following is the correct syntax to set a page to revalidate every 60 seconds in Next.js?

easy

A. export revalidate = 60;

B. export const revalidate = 60;

C. const revalidate = 60 export;

D. export const revalidate(60);

Solution

1. Step 1: Recall correct export syntax in Next.js

   To export a constant, the syntax is export const name = value;.

2. Step 2: Match this with revalidate usage

   export const revalidate = 60; matches this pattern exactly. Other options have syntax errors or misplaced keywords.

3. Final Answer:

   export const revalidate = 60; -> Option B

4. Quick Check:

   Correct export syntax = A [OK]

Hint: Use 'export const' to export revalidate value [OK]

Common Mistakes:

• Omitting 'const' keyword
• Using parentheses incorrectly
• Placing export keyword after variable

3. Given this Next.js page code snippet:

export const revalidate = 10;

export default function Page() {
  return <div>Time: {Date.now()}</div>;
}

What will happen if you visit this page multiple times within 10 seconds?

medium

A. The page updates the timestamp on every visit immediately

B. The page never updates after the first visit

C. The page throws an error because Date.now() is not allowed

D. The page shows the same timestamp for 10 seconds before updating

Solution

1. Step 1: Understand revalidate timing effect

   With revalidate = 10, Next.js caches the page and only regenerates it after 10 seconds.

2. Step 2: Predict page behavior on multiple visits

   Within 10 seconds, the cached page is served, so the timestamp stays the same. After 10 seconds, it updates.

3. Final Answer:

   The page shows the same timestamp for 10 seconds before updating -> Option D

4. Quick Check:

   Revalidate caches page for 10 seconds = B [OK]

Hint: Revalidate delays page update by set seconds [OK]

Common Mistakes:

• Assuming Date.now() updates on every visit
• Thinking revalidate disables page updates
• Confusing revalidate with client-side rendering

4. You wrote this code in a Next.js page:

export const revalidate = '30';

export default function Page() {
  return <div>Hello</div>;
}

What is the problem with this code?

medium

A. revalidate must be a number, not a string

B. Page component must be async to use revalidate

C. You cannot export revalidate in a page component

D. The return statement is missing parentheses

Solution

1. Step 1: Check the type of revalidate value

   The revalidate export expects a number representing seconds, not a string.

2. Step 2: Identify the error caused by wrong type

   Using a string will cause Next.js to ignore or error on revalidation timing.

3. Final Answer:

   revalidate must be a number, not a string -> Option A

4. Quick Check:

   revalidate requires number type = A [OK]

Hint: Use number, not quotes, for revalidate seconds [OK]

Common Mistakes:

• Using quotes around the number
• Thinking revalidate needs async function
• Misunderstanding export rules

5. You want a Next.js page to show fresh data but also improve performance by caching for 5 minutes. Which revalidation pattern should you use?

export const revalidate = ?;

Choose the best value and explain why.

hard

A. 60, to update every minute for fresher data

B. 0, to disable caching and always fetch fresh data

C. 300, because 300 seconds equals 5 minutes, balancing freshness and caching

D. Infinity, to cache forever and never update

Solution

1. Step 1: Convert 5 minutes to seconds

   5 minutes equals 300 seconds, so revalidate should be set to 300.

2. Step 2: Understand caching vs freshness tradeoff

   Setting revalidate to 300 caches the page for 5 minutes, improving performance but still updating regularly.

3. Step 3: Evaluate other options

   0 disables caching (no performance gain), 60 updates too often, Infinity never updates (stale data).

4. Final Answer:

   300, because 300 seconds equals 5 minutes, balancing freshness and caching -> Option C

5. Quick Check:

   5 minutes = 300 seconds revalidate [OK]

Hint: Set revalidate to seconds matching desired cache time [OK]

Common Mistakes:

• Using 0 thinking it improves performance
• Choosing too short or too long revalidate values
• Confusing minutes with seconds