🚀 Understanding Static Generation (SG) and Incremental Static Regeneration (ISR) in Next.js

📋 Table of Contents

1. What is Static Generation (SG)?

2. Benefits of Static Generation

3. Limitations of Static Generation

4. What is Incremental Static Regeneration (ISR)?

5. Benefits of ISR

6. How to Implement SG and ISR in Next.js

7. When to Use SG vs ISR?

8. Summary

⚙️What is Static Generation (SG)?

Static Generation means the HTML of your pages is generated at build time. Pages are pre-rendered once and served as static files. This makes pages load fast because no server computation is needed on each request.

✅ Benefits of Static Generation

• Fast page loads and improved SEO

• Less server load

• Easy to cache content

⚠️ Limitations of Static Generation

• Not suitable for data that changes frequently

• Requires rebuilds to update content

🔄 What is Incremental Static Regeneration (ISR)?

ISR allows you to update static content after build time by regenerating pages in the background as traffic comes in. This helps you get the benefits of static generation but with fresh data without rebuilding the entire app.

🔍 How Does ISR Generate Pages in the Background?

When you use ISR with a revalidate time (e.g., 10 seconds), Next.js does this:

1. Initial Build:
   During the initial build, Next.js generates static HTML for all pages configured with getStaticProps.

2. Serving Static Pages:
   When a user visits the page, Next.js serves the already generated static HTML immediately.

3. Background Regeneration:
   After the page is served, if the revalidate time has passed since the last generation, Next.js triggers a background regeneration process:

   • It fetches fresh data by calling getStaticProps again.

   • It builds a new version of the static HTML for that page on the server (at runtime, but not during the initial build).

   • This new page replaces the old cached static page.

4. No Downtime & No Blocking Users:
   The user requesting the page sees the old version while the new version is being generated in the background.
   Once done, subsequent visitors get the updated static page.

💻 How to Implement SG and ISR in Next.js

export async function getStaticProps() {
  // Fetch data from an API or CMS
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return {
    props: { products },
    revalidate: 60, // Regenerate page every 60 seconds
  };
}

export default function ProductsPage({ products }) {
  return (
    <div>
      <h1>Our Products</h1>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

Above example is a simple one, we can also implement SG and ISR for specified paths in dynamic routes( /api/products/[id]). When the route is not in the path list made by GetStaticPaths, and fallback: true/blocking it will follow default path and GetStaticProps will be called at runtime.

// pages/products/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';

type Product = {
  id: string;
  name: string;
  description: string;
};

type Props = {
  product: Product;
};

export default function ProductPage({ product }: Props) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

// Pre-generate paths for popular products at build time
export const getStaticPaths: GetStaticPaths = async () => {
  const popularProductIds = ['1', '2', '3']; // example popular IDs
  const paths = popularProductIds.map((id) => ({ params: { id } }));

  return { paths, fallback: 'blocking' }; 
  // 'blocking' allows on-demand generation for less popular products
};

// Fetch product data at build time and revalidate every 60 seconds
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const id = params?.id as string;

  // Simulate fetching product data from an API or DB
  const product = await fetch(`https://api.example.com/products/${id}`).then(res => res.json());

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 60, // Regenerate this page in the background every 60 seconds
  };
};

📊 When to Use SG vs ISR?

• Use SG when data rarely changes (e.g., blog posts, marketing pages)

• Use ISR for dynamic content that updates periodically (e.g., news, e-commerce product listings)

📝 Summary

Static Generation and Incremental Static Regeneration provide flexible ways to build performant Next.js apps. SG is best for truly static content, while ISR enables scalability and freshness with minimal tradeoffs