ISR (Incremental Static Regeneration) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable ISR by setting the revalidate time in seconds.

NextJS

export const revalidate = [1];

Drag options to blanks, or click blank then click option'

A60

B0

C-1

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 disables ISR and causes static generation only.

Using negative numbers is invalid.

Setting revalidate to 60 means the page will regenerate at most once every 60 seconds.

2fill in blank

medium

Complete the code to export a Next.js page component that uses ISR.

NextJS

export default function Home() {
  return <main>[1]</main>;
}

Drag options to blanks, or click blank then click option'

Aundefined

Bconsole.log('Hello')

CfetchData()

D<h1>Welcome</h1>

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a function call instead of JSX.

Using console.log inside return.

The component must return valid JSX to render the page content.

3fill in blank

hard

Fix the error in the ISR page by completing the export of the revalidate time.

NextJS

export const revalidate = [1];

Drag options to blanks, or click blank then click option'

A'60'

Btrue

C60

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a number.

Using boolean values.

The revalidate value must be a number, not a string or boolean.

4fill in blank

hard

Fill both blanks to create a page that fetches data and uses ISR with 120 seconds revalidation.

NextJS

export async function [1]() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export const revalidate = [2];

Drag options to blanks, or click blank then click option'

AgetStaticProps

BgetServerSideProps

CfetchData

D120

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps disables ISR.

Setting revalidate to a string.

getStaticProps is used for static generation with ISR, and revalidate sets the regeneration time.

5fill in blank

hard

Fill all three blanks to create a Next.js page that fetches data, uses ISR with 30 seconds, and displays the data.

NextJS

export async function [1]() {
  const res = await fetch('https://api.example.com/items');
  const items = await res.json();
  return { props: { items } };
}

export const revalidate = [2];

export default function ItemsPage({ [3] }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

AgetStaticProps

Bitems

C30

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching prop names between fetch function and component.

Using wrong revalidate value type.

Use getStaticProps to fetch data for ISR, set revalidate to 30 seconds, and receive items as props to render.

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