ISR (Incremental Static Regeneration) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ISR (Incremental Static Regeneration) in Next.js?

ISR lets you update static pages after build time without rebuilding the whole site. It regenerates pages in the background when users visit them, keeping content fresh and fast.

beginner

How do you enable ISR for a page in Next.js?

You add the revalidate property in getStaticProps and set it to the number of seconds after which the page should regenerate.

intermediate

What happens when a user visits a page that needs regeneration in ISR?

The user sees the old page immediately. Next.js regenerates the page in the background. The next visitor gets the updated page.

intermediate

Why is ISR better than rebuilding the whole site for every content change?

ISR updates only the changed pages, saving time and server resources. It keeps pages fast and content fresh without full rebuild delays.

beginner

Which Next.js data fetching method supports ISR?

getStaticProps supports ISR by returning a revalidate value. getServerSideProps does not support ISR.

What does the revalidate property control in ISR?

A How often a static page regenerates in seconds

B The number of users allowed to visit a page

C The cache size for static files

D The server response timeout

The revalidate property sets the time in seconds after which Next.js regenerates the static page in the background.

When does ISR regenerate a page?

A In the background after the <code>revalidate</code> time when a user visits

B On every user request without caching

C Only during the initial build

D When the server restarts

ISR regenerates pages in the background after the revalidate interval when a user visits the page.

Which data fetching method is used with ISR in Next.js?

A <code>getServerSideProps</code>

B <code>useEffect</code>

C <code>getStaticProps</code>

D <code>getInitialProps</code>

ISR works with getStaticProps by adding the revalidate property.

What does a user see when a page is regenerating with ISR?

A A loading spinner until regeneration finishes

B An error message

C A blank page

D The old cached page immediately

The user sees the old cached page immediately while regeneration happens in the background.

Why is ISR useful for large websites?

A It rebuilds the entire site faster

B It updates only changed pages, saving time and resources

C It disables caching for all pages

D It forces server-side rendering for all pages

ISR updates only the pages that need changes, making updates faster and more efficient for large sites.

Explain how ISR works in Next.js and why it is beneficial compared to full static rebuilds.

Think about how static pages can stay fresh without rebuilding everything.

Describe the user experience when visiting a page that is being regenerated using ISR.

Focus on what the user sees and what happens behind the scenes.

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