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.