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.