ISR (Incremental Static Regeneration) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Next.js page uses ISR with revalidate set to 10?

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

NextJS

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

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

A The page is regenerated on the client side every 10 seconds after the page loads.

B The page is regenerated on every request, ignoring the static generation.

C The page is statically generated at build time and then regenerated on the server at most every 10 seconds when a request comes in.

D The page is generated only once at build time and never updated until the next build.

💡 Hint

Think about how Next.js updates static pages with ISR.

ISR allows Next.js to update static pages after deployment by regenerating them on the server at most once per the revalidate interval when a request comes in.

📝 Syntax

intermediate

Which code snippet correctly implements ISR in Next.js?

Choose the code snippet that correctly sets up ISR with a 60-second revalidation interval.

A

export async function getStaticProps() {
  return { props: {}, revalidate: 60 };
}

B

export async function getStaticProps() {
  return { props: {}, revalidate: '60' };
}

C

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

D

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

💡 Hint

Check the type of the revalidate value.

The revalidate property must be a number representing seconds. Strings or booleans are invalid.

❓ state_output

advanced

What is the rendered output after ISR page regenerates?

Given this ISR page that shows the current timestamp, what will a user see after the page regenerates?

NextJS

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

export default function TimestampPage({ timestamp }) {
  return <div>Timestamp: {timestamp}</div>;
}

A The page shows the current timestamp on every request, updating live.

B The page shows a loading spinner while regenerating, then updates automatically on the client.

C The page shows the timestamp from build time only, never updating.

D The page shows the timestamp from the last regeneration, updated at most every 5 seconds.

💡 Hint

Remember ISR regenerates pages on the server, not on the client.

ISR updates the static page on the server after the revalidate interval. Users see the updated timestamp only after regeneration completes and the new static page is served.

🔧 Debug

advanced

Why does this ISR page fail to regenerate?

This Next.js page uses ISR but never updates after deployment. What is the likely cause?

NextJS

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

export default function DataPage({ data }) {
  return <div>{data.message}</div>;
}

A The page needs <code>revalidate</code> set to a negative number to enable ISR.

B Setting <code>revalidate</code> to 0 disables ISR, so the page never regenerates after build.

C The fetch URL is invalid, causing the regeneration to fail silently.

D The component must use <code>useEffect</code> to update data for ISR to work.

💡 Hint

Check the meaning of revalidate: 0 in Next.js ISR.

Setting revalidate to 0 disables ISR and makes the page behave like pure static generation, never regenerating after build.

🧠 Conceptual

expert

How does ISR improve user experience compared to SSR in Next.js?

Choose the best explanation of how Incremental Static Regeneration (ISR) benefits users compared to Server-Side Rendering (SSR).

A ISR serves fast static pages initially and updates them in the background, reducing server load and improving response times compared to SSR which renders on every request.

B ISR renders pages on every request like SSR but caches them on the client for faster reloads.

C ISR requires manual rebuilds to update pages, so it is slower than SSR but uses less bandwidth.

D ISR disables caching and forces the browser to fetch fresh data every time, unlike SSR which caches pages.

💡 Hint

Think about how ISR combines static and dynamic rendering benefits.

ISR pre-builds pages as static files for fast delivery and regenerates them in the background after a set time, reducing server work and improving speed compared to SSR which renders on every request.