On-demand revalidation in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when on-demand revalidation is triggered in Next.js?

Consider a Next.js page using getStaticProps with revalidate set. When you call res.revalidate('/path') in an API route, what is the immediate effect on the page?

NextJS

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

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

// API route handler
export default async function handler(req, res) {
  await res.revalidate('/path');
  res.status(200).json({ revalidated: true });
}

A The page is rebuilt in the background and the next request to the page gets the updated content.

B The page is immediately rebuilt and the new content is served on the next request.

C The page is rebuilt immediately and the client currently viewing the page sees the updated content instantly.

D Nothing happens until the revalidate time expires; the API call has no effect.

💡 Hint

Think about how Next.js handles static regeneration and when the new content becomes available.

On-demand revalidation triggers a background rebuild of the page. The updated content is not served until the next request after the rebuild finishes. The current users do not see the update instantly.

📝 Syntax

intermediate

Which code snippet correctly triggers on-demand revalidation in Next.js API route?

Choose the correct way to trigger on-demand revalidation for the path /blog/post-1 inside a Next.js API route.

NextJS

export default async function handler(req, res) {
  // Your code here
}

A await res.revalidate('/blog/post-1'); res.json({ done: true });

B await res.revalidate('/blog/post-1'); res.send({ done: true });

C await res.revalidate('/blog/post-1'); res.status(200).json({ done: true });

D res.revalidate('/blog/post-1'); res.status(200).json({ done: true });

💡 Hint

Remember to await the revalidation and send a proper HTTP status with JSON response.

The res.revalidate method returns a promise, so it must be awaited. Also, sending a 200 status with JSON is the recommended pattern.

🔧 Debug

advanced

Why does on-demand revalidation fail with a 500 error in this code?

Given this API route code, why does calling it cause a 500 error?

NextJS

export default async function handler(req, res) {
  try {
    await res.revalidate('/');
    res.status(200).json({ revalidated: true });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
}

A The API route is missing the <code>secret</code> query parameter required for revalidation.

B The <code>res.revalidate</code> method requires the full URL, not just the path.

C The <code>res.revalidate</code> method is not supported in API routes and causes an error.

D The <code>res.json</code> call is missing a status code, causing the error.

💡 Hint

Check Next.js docs about securing on-demand revalidation.

Next.js requires a secret token in the query string to authorize on-demand revalidation. Without it, the call fails with 500.

❓ state_output

advanced

What is the output after on-demand revalidation updates the page?

Assume a Next.js page shows the current timestamp from getStaticProps with revalidate: 60. After calling res.revalidate('/time') in an API route, what will the page show on the next request?

NextJS

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

export default function TimePage({ time }) {
  return <p>Timestamp: {time}</p>;
}

A An error because the page cannot update until the revalidate time expires.

B The timestamp from the API route that called res.revalidate, instantly updated.

C The timestamp from the initial build, unchanged until 60 seconds pass.

D The timestamp from the last successful on-demand revalidation call.

💡 Hint

Think about when the page props update after on-demand revalidation.

On-demand revalidation rebuilds the page immediately in the background. The next request after rebuild gets the updated timestamp.

🧠 Conceptual

expert

Which statement about on-demand revalidation in Next.js is TRUE?

Choose the correct statement about how on-demand revalidation works in Next.js.

A On-demand revalidation disables the <code>revalidate</code> time set in <code>getStaticProps</code>.

B On-demand revalidation requires a secret token to prevent unauthorized rebuilds.

C On-demand revalidation immediately updates all cached pages globally without waiting for requests.

D On-demand revalidation can be triggered from client-side code directly without an API route.

💡 Hint

Consider security implications of rebuilding static pages on demand.

Next.js requires a secret token to secure on-demand revalidation API routes to prevent abuse.

Practice

1. What is the main purpose of on-demand revalidation in Next.js?

easy

A. To disable static site generation completely

B. To rebuild the whole site every time a user visits

C. To update specific static pages instantly without rebuilding the entire site

D. To cache pages permanently without updates

Solution

1. Step 1: Understand static site generation

   Static pages are pre-built and served fast but can become outdated.

2. Step 2: Role of on-demand revalidation

   It updates only specific pages instantly without rebuilding the whole site, keeping content fresh.

3. Final Answer:

   To update specific static pages instantly without rebuilding the entire site -> Option C

4. Quick Check:

   On-demand revalidation = update specific pages fast [OK]

Hint: Remember: on-demand means update only what is needed [OK]

Common Mistakes:

• Thinking it rebuilds the entire site
• Confusing it with disabling static generation
• Assuming pages never update

2. Which Next.js API method is used inside an API route to trigger on-demand revalidation?

easy

A. res.reload(path)

B. res.refresh(path)

C. res.update(path)

D. res.revalidate(path)

Solution

1. Step 1: Identify the method for revalidation

   Next.js provides res.revalidate(path) to trigger revalidation of a page.

2. Step 2: Confirm method usage in API route

   This method is called inside an API route handler to update the static page at the given path.

3. Final Answer:

   res.revalidate(path) -> Option D

4. Quick Check:

   API route uses res.revalidate() to update pages [OK]

Hint: Look for 'revalidate' keyword in the method name [OK]

Common Mistakes:

• Using non-existent methods like res.refresh()
• Confusing with client-side reload methods
• Misspelling the method name

3. Given this API route code snippet, what will happen when a POST request with the correct secret is sent?

export default async function handler(req, res) {
  if (req.method === 'POST' && req.query.secret === process.env.MY_SECRET) {
    await res.revalidate('/blog/post-1')
    return res.json({ revalidated: true })
  }
  return res.status(401).json({ message: 'Invalid token' })
}

medium

A. The page '/blog/post-1' will be revalidated and a success JSON returned

B. The entire site will rebuild and return a success JSON

C. The request will fail with a 401 error regardless of the secret

D. The page '/blog/post-1' will reload on the client side

Solution

1. Step 1: Check request method and secret

   The handler checks if the method is POST and the secret matches the environment variable.

2. Step 2: Call res.revalidate on the specific page

   If conditions pass, it calls res.revalidate('/blog/post-1') to update that page only.

3. Final Answer:

   The page '/blog/post-1' will be revalidated and a success JSON returned -> Option A

4. Quick Check:

   Correct secret + POST triggers revalidation [OK]

Hint: Check method and secret before revalidate call [OK]

Common Mistakes:

• Assuming entire site rebuilds
• Ignoring secret check
• Thinking client reload happens automatically

4. Identify the error in this API route code for on-demand revalidation:

export default async function handler(req, res) {
  if (req.method === 'GET' && req.query.secret === process.env.SECRET) {
    await res.revalidate('/home')
    res.json({ revalidated: true })
  } else {
    res.status(401).json({ message: 'Unauthorized' })
  }
}

medium

A. Missing await before res.json()

B. Not returning after res.json() causing possible errors

C. Using GET method instead of POST for revalidation

D. Incorrect path string in res.revalidate()

Solution

1. Step 1: Check response handling after revalidation

   After calling res.revalidate() and sending JSON, the function should return to avoid continuing execution.

2. Step 2: Identify missing return statement

   The code calls res.json() but does not return, which can cause errors or multiple responses.

3. Final Answer:

   Not returning after res.json() causing possible errors -> Option B

4. Quick Check:

   Always return after sending response [OK]

Hint: Return immediately after sending response [OK]

Common Mistakes:

• Using GET instead of POST (allowed but not recommended)
• Forgetting to return after res.json()
• Assuming res.revalidate() rebuilds entire site

5. You want to revalidate multiple pages on-demand after updating content. Which approach correctly triggers revalidation for '/about' and '/contact' in one API route?

hard

A. await res.revalidate('/about'); await res.revalidate('/contact'); res.json({ revalidated: true })

B. await res.revalidate(['/about', '/contact']); res.json({ revalidated: true })

C. res.revalidate('/about', '/contact'); res.json({ revalidated: true })

D. res.revalidate('/about'); res.revalidate('/contact'); res.json({ revalidated: true })

Solution

1. Step 1: Understand res.revalidate usage

   The res.revalidate() method accepts a single path string and returns a promise.

2. Step 2: Revalidate multiple pages sequentially

   To revalidate multiple pages, call await res.revalidate() separately for each path before sending response.

3. Final Answer:

   await res.revalidate('/about'); await res.revalidate('/contact'); res.json({ revalidated: true }) -> Option A

4. Quick Check:

   Call res.revalidate() separately for each page [OK]

Hint: Call revalidate separately for each page with await [OK]

Common Mistakes:

• Passing array of paths to res.revalidate() (not supported)
• Calling res.revalidate without await causing race conditions
• Calling res.revalidate without returning or sending response