Next.js 15 introduces a powerful feature, Incremental Static Regeneration (ISR), that allows pages to be regenerated after the initial build, without needing to rebuild the entire site. With the App Router, this functionality becomes more accessible and flexible by enabling the regeneration of static content on-demand.

In this post, we’ll dive into how to set up ISR using the App Router with dynamic routes and explore how to control revalidation intervals effectively.

What is Incremental Static Regeneration (ISR)?

ISR allows you to keep static content fresh by regenerating static pages after the initial build at specific intervals. This is extremely useful when you have content that doesn’t change often but needs to be updated from time to time. It offers the best of both worlds: static generation for fast load times and periodic regeneration for content freshness.

With ISR, Next.js will regenerate static pages in the background after a given interval, while serving the old page to users until the new one is ready.

How to Set Up ISR in Next.js 15 Using the App Router

In Next.js 15 with the App Router, ISR works similarly to earlier versions but with better integration into the App Directory. The key is to use the getStaticProps function in combination with the revalidate key.

Example: ISR with a Blog Page in Next.js 15

Let’s say you have a blog and you want to generate a list of blog posts that are static but refresh every 60 seconds. We'll demonstrate this with a dynamic route for individual blog posts.

Step 1: Define Dynamic Route for Blog Post

First, define your dynamic route inside the App Router. In the App Router, the files inside app/ define your pages and routes.

Create the following structure:

/app
  /blogs
    /[slug]
      /page.tsx
      /layout.tsx

Step 2: Create Blog Post Page with ISR

Inside app/blogs/[slug]/page.tsx, use getStaticProps to fetch blog data and set the revalidate period to refresh the page every 60 seconds.

// app/blogs/[slug]/page.tsx

import { getBlogPost } from "@/lib/blogs";

 // A function to fetch the blog post
export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug); // Fetch post based on slug

  return (
    <article>
      <h1>{post.title}h1>
      <p>{post.content}p>
    article>
  );
}

// Using ISR for blog pages
export async function getStaticProps({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug);

  return {
    props: {
      post,
    },
    revalidate: 60,  // Revalidate every 60 seconds (after build)
  };
}

// Dynamically generating static paths
export async function getStaticPaths() {
  const posts = await getAllBlogSlugs();  // Function to fetch all blog slugs
  const paths = posts.map((slug) => ({ params: { slug } }));
  return { paths, fallback: "blocking" };}

• getStaticProps: Fetches the data for the page. The revalidate: 60 tells Next.js to regenerate the page in the background every 60 seconds.

• getStaticPaths: Provides all the dynamic routes ([slug] in this case). It returns an array of params with each blog slug. This ensures that all blog posts are pre-rendered at build time.

Step 3: Set Fallback Strategy

The fallback key in getStaticPaths determines what happens when a page hasn’t been generated yet.

• fallback: "blocking": This ensures that Next.js waits for the new page to be generated before serving it, blocking requests until the page is ready.
• fallback: "false": This means that any routes that aren't pre-generated will return a 404.
• fallback: "true": If a route isn’t generated, Next.js will serve a static fallback page until the page is generated in the background.

In our example, we use fallback: "blocking" to ensure that users only see a complete page after the ISR regeneration happens.

How to Monitor ISR Behavior

You can monitor the ISR behavior using the Next.js Analytics. This feature will help you track how often pages are being regenerated and how many requests have been made to the server. The generated static page will be served until the next revalidation.

 Benefits of Using ISR with App Router

• Improved Performance: You still get the performance of static pages, with the added benefit of periodic regeneration.
• Reduced Build Times: Instead of rebuilding the entire site, only the pages that need updating are regenerated.
• Scalable: For large sites with lots of dynamic content, ISR helps to scale without compromising build performance.
• Flexibility: You can control the revalidation period to fine-tune how often pages get updated

 Real-World Use Cases for ISR

ISR is especially useful in scenarios where you have:

• Frequently Updated Content: For example, news sites, blogs, or product catalogs where content changes periodically but doesn’t need to be real-time.
• Large Websites: For websites with thousands of pages, ISR ensures that only the changed pages are rebuilt, drastically reducing build times.
• E-commerce Sites: E-commerce pages such as product listings or inventory that change periodically can benefit from ISR.

Triggering ISR Regeneration with Webhooks

In real-world scenarios, you may want to regenerate a page as soon as content changes, like when a blog post is updated. You can use webhooks to trigger page regeneration.

For example, you can set up a webhook from your CMS (Content Management System) to notify Next.js when a post is updated, which will then trigger a page regeneration.

// Example of a webhook handler to trigger ISR regeneration

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { slug } = req.body; // Assuming the CMS sends the slug of the updated post
    
    // Trigger ISR regeneration
    await res.revalidate(`/blogs/${slug}`);

    return res.json({ revalidated: true });
  }

  return res.status(404).send('Not Found');
}

Conclusion

Incremental Static Regeneration (ISR) in Next.js 15 provides a powerful tool for serving fresh content on static pages without rebuilding your entire site. By combining ISR with the App Router, Next.js gives developers more flexibility in how they manage their routes and content updates.

With ISR, you can build highly performant sites that serve up-to-date content efficiently, ensuring your users always get the best experience.

Powered by Froala Editor