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.