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.

Practice

1. What is the main purpose of Incremental Static Regeneration (ISR) in Next.js?

easy

A. To disable static generation completely

B. To generate pages only on the client side

C. To update static pages after build without rebuilding the entire site

D. To force server-side rendering on every request

Solution

1. Step 1: Understand ISR concept

   ISR allows static pages to be updated after the initial build without rebuilding the whole site.

2. Step 2: Compare options

   Options B, C, and D describe client-side rendering, disabling static generation, or forcing server-side rendering, which are not ISR features.

3. Final Answer:

   To update static pages after build without rebuilding the entire site -> Option C

4. Quick Check:

   ISR updates static pages incrementally = A [OK]

Hint: ISR updates static pages without full rebuilds [OK]

Common Mistakes:

• Confusing ISR with client-side rendering
• Thinking ISR disables static generation
• Believing ISR forces server-side rendering

2. Which Next.js function should you use to enable ISR by specifying a revalidation time?

easy

A. getServerSideProps

B. getStaticProps

C. getInitialProps

D. useEffect

Solution

1. Step 1: Identify ISR enabling function

   ISR is enabled by returning a revalidate property inside getStaticProps.

2. Step 2: Check other options

   getServerSideProps is for server-side rendering, getInitialProps is legacy, and useEffect is a React hook for client-side effects.

3. Final Answer:

   getStaticProps -> Option B

4. Quick Check:

   ISR uses getStaticProps with revalidate = D [OK]

Hint: Use getStaticProps with revalidate for ISR [OK]

Common Mistakes:

• Using getServerSideProps instead of getStaticProps
• Confusing client-side hooks with data fetching
• Using deprecated getInitialProps for ISR

3. Given this code snippet, what will be the behavior of the page?

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

medium

A. The page throws a syntax error

B. The page never updates after build

C. The page updates on every request

D. The page updates every 10 seconds with new time

Solution

1. Step 1: Analyze revalidate property

   The revalidate: 10 means Next.js will regenerate the page at most every 10 seconds.

2. Step 2: Understand page update behavior

   The page will serve the static content initially, then update the static page in the background every 10 seconds.

3. Final Answer:

   The page updates every 10 seconds with new time -> Option D

4. Quick Check:

   revalidate 10 means update every 10 seconds = A [OK]

Hint: revalidate sets update interval in seconds [OK]

Common Mistakes:

• Thinking page never updates after build
• Confusing ISR with server-side rendering
• Assuming syntax error due to revalidate

4. Identify the error in this ISR setup:

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

medium

A. revalidate must be a number, not a string

B. props must be a function, not an object

C. getStaticProps cannot be async

D. Missing fallback property

Solution

1. Step 1: Check revalidate type

   The revalidate property must be a number representing seconds, not a string.

2. Step 2: Verify other parts

   props is correctly an object, getStaticProps can be async, and fallback is unrelated here.

3. Final Answer:

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

4. Quick Check:

   revalidate type must be number = C [OK]

Hint: revalidate must be numeric seconds, not string [OK]

Common Mistakes:

• Passing revalidate as string instead of number
• Thinking getStaticProps can't be async
• Confusing fallback with revalidate

5. You want a blog page to update its static content every 5 minutes but also show a fallback loading page on first visit to new posts. Which ISR setup is correct?

hard

A. Use getStaticProps with revalidate: 300 and fallback: 'blocking' in getStaticPaths

B. Use getServerSideProps with revalidate: 300

C. Use getStaticProps with revalidate: '300' and no fallback

D. Use getStaticPaths with fallback: false and no revalidate

Solution

1. Step 1: Understand ISR with fallback

   To update static pages every 5 minutes (300 seconds) and show fallback loading for new pages, use revalidate: 300 in getStaticProps and fallback: 'blocking' in getStaticPaths.

2. Step 2: Check other options

   Use getServerSideProps with revalidate: 300 uses server-side rendering, not ISR. Use getStaticProps with revalidate: '300' and no fallback has revalidate as string and no fallback. Use getStaticPaths with fallback: false and no revalidate disables fallback and revalidate, so no ISR updates or loading fallback.

3. Final Answer:

   Use getStaticProps with revalidate: 300 and fallback: 'blocking' in getStaticPaths -> Option A

4. Quick Check:

   ISR with fallback blocking and revalidate 300 = B [OK]

Hint: Combine revalidate with fallback: 'blocking' for ISR + loading [OK]

Common Mistakes:

• Using server-side rendering instead of ISR
• Passing revalidate as string
• Setting fallback to false disables loading fallback