Incremental Static Regeneration (ISR) Next.js

What You’ll Learn 📚

• Understanding the core concepts of ISR
• Key terminology and definitions
• Simple and progressively complex examples
• Common questions and answers
• Troubleshooting common issues

Introduction to Incremental Static Regeneration

Next.js is a popular React framework that enables developers to build fast and user-friendly web applications. One of its standout features is Incremental Static Regeneration (ISR). ISR allows you to update static pages after you’ve built your application. This means you can serve static content and still update it without rebuilding the entire site. 🚀

Core Concepts

• Static Generation: Pre-rendering pages at build time.
• Server-Side Rendering (SSR): Generating pages on each request.
• Incremental Static Regeneration (ISR): Updating static pages after the site is built.

Think of ISR as a way to get the best of both worlds: the speed of static pages and the freshness of dynamic content!

Key Terminology

• Build Time: The time when your application is compiled and pages are generated.
• Revalidation: The process of updating a static page after a certain period.
• Fallback: A setting that determines what to show while a page is being generated.

Let’s Start with the Simplest Example

npx create-next-app@latest isr-example

cd isr-example

// pages/isr.js
export async function getStaticProps() {
  return {
    props: {
      time: new Date().toISOString()
    },
    revalidate: 10 // Revalidate every 10 seconds
  };
}

export default function ISRPage({ time }) {
  return 
Page generated at: {time}
;
}

Progressively Complex Examples

Example 1: Adding Dynamic Data

Let’s fetch some data from an API and use ISR to update it.

// pages/isr-dynamic.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data
    },
    revalidate: 60 // Revalidate every 60 seconds
  };
}

export default function ISRDynamicPage({ data }) {
  return 
Data: {JSON.stringify(data)}
;
}

Example 2: Handling Fallbacks

Sometimes, you might want to show a loading state while a page is being generated. Let’s see how to handle fallbacks.

// pages/isr-fallback.js
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true // Enable fallback mode
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/data/${params.id}`);
  const data = await res.json();
  return {
    props: {
      data
    },
    revalidate: 60
  };
}

export default function ISRWithFallback({ data }) {
  const router = useRouter();

  if (router.isFallback) {
    return 
Loading...
;
  }

  return 
Data: {JSON.stringify(data)}
;
}

Example 3: Combining ISR with Client-Side Fetching

Sometimes, you might want to combine ISR with client-side fetching for even more dynamic content.

// pages/isr-client.js
import { useState, useEffect } from 'react';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const staticData = await res.json();
  return {
    props: {
      staticData
    },
    revalidate: 60
  };
}

export default function ISRClientPage({ staticData }) {
  const [clientData, setClientData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://api.example.com/client-data');
      const data = await res.json();
      setClientData(data);
    }
    fetchData();
  }, []);

  return (
    

      
Static Data: {JSON.stringify(staticData)}
      
Client Data: {clientData ? JSON.stringify(clientData) : 'Loading...'}
    
  );
}

Common Questions and Answers

1. What is ISR?
   ISR allows you to update static pages after your site is built, combining the benefits of static and dynamic content.
2. How does revalidation work?
   Revalidation updates a static page after a specified period, ensuring the content is fresh.
3. What is the difference between ISR and SSR?
   ISR updates static pages periodically, while SSR generates pages on each request.
4. Can I use ISR with dynamic routes?
   Yes, ISR works with dynamic routes using getStaticPaths and getStaticProps.
5. What happens if revalidation fails?
   If revalidation fails, the last successfully generated page is served.

Troubleshooting Common Issues

Issue: Page not updating

Ensure your revalidate property is set correctly and that your server can reach the API.

Issue: Fallback not working

Check if fallback is set to true in getStaticPaths.

Issue: API fetch errors

Verify your API endpoint and network connection.

Practice Exercises

• Create a new page with ISR that fetches weather data and updates every 5 minutes.
• Experiment with different revalidate times and observe the behavior.
• Combine ISR with client-side fetching for a news application.

For more information, check out the Next.js ISR documentation.

Keep experimenting and happy coding! 💻✨