ISR (Incremental Static Regeneration) in NextJS - Mini Project: Build & Apply

Build a Blog with ISR (Incremental Static Regeneration) in Next.js

📖 Scenario: You are creating a simple blog website using Next.js. The blog posts data is static but can update occasionally. To keep the site fast and SEO-friendly, you will use Incremental Static Regeneration (ISR) to update the pages automatically after a set time without rebuilding the entire site.

🎯 Goal: Build a Next.js page that fetches blog posts data at build time and uses ISR to regenerate the page every 10 seconds.

📋 What You'll Learn

Create a static data array of blog posts with id, title, and content.

Add a revalidation time variable set to 10 seconds.

Implement getStaticProps to return the posts and revalidate time.

Create a functional React component that displays the list of blog posts.

💡 Why This Matters

🌍 Real World

Many websites need to show content that updates occasionally but want the speed and SEO benefits of static pages. ISR lets Next.js update pages in the background without rebuilding the whole site.

💼 Career

Understanding ISR is important for frontend developers working with Next.js to build fast, scalable, and SEO-friendly web applications that handle dynamic content efficiently.

1

Create the blog posts data array

Create a constant array called posts with these exact objects: { id: 1, title: 'Hello World', content: 'Welcome to the blog!' } and { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }.

NextJS

// Create the posts array with two blog post objects
// Your code here

Hint

Use const posts = [ ... ] with two objects inside.

2

Set the revalidation time

Create a constant called revalidateTime and set it to 10 to represent 10 seconds for ISR revalidation.

NextJS

const posts = [
  { id: 1, title: 'Hello World', content: 'Welcome to the blog!' },
  { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }
];

// Create a constant revalidateTime and set it to 10
// Your code here

Hint

Use const revalidateTime = 10; to set the revalidation interval.

3

Implement getStaticProps with ISR

Write an async function called getStaticProps that returns an object with props containing the posts array and a revalidate property set to revalidateTime.

NextJS

const posts = [
  { id: 1, title: 'Hello World', content: 'Welcome to the blog!' },
  { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }
];

const revalidateTime = 10;

// Write async function getStaticProps returning props with posts and revalidate with revalidateTime
// Your code here

Hint

Use export async function getStaticProps() { return { props: { posts }, revalidate: revalidateTime } }.

4

Create the React component to display posts

Create a default exported React functional component called Blog that receives posts as a prop and returns a <main> element containing an <h1> with text 'Blog Posts' and an unordered list <ul> with each post's title in a <li>. Use post.id as the key for each list item.

NextJS

const posts = [
  { id: 1, title: 'Hello World', content: 'Welcome to the blog!' },
  { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }
];

const revalidateTime = 10;

export async function getStaticProps() {
  return {
    props: { posts },
    revalidate: revalidateTime
  };
}

// Create default export function Blog({ posts }) that returns main with h1 and ul listing post titles
// Your code here

Hint

Use export default function Blog({ posts }) { return ( ... ) } with JSX inside.

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