Incremental Static Regeneration (ISR) in Next js

Incremental Static Regeneration (ISR) in Next.js is a powerful feature that allows you to generate and update static pages at runtime without rebuilding the entire site. It enables you to serve statically generated pages with the ability to refresh them with new data dynamically, providing a seamless experience for users while maintaining the benefits of static site generation.

⭐Note: ISR is most effective for pages that don't need to be updated frequently and where eventual consistency is acceptable. Pages that require real-time data updates may be better suited for server-side rendering (SSR) or client-side rendering (CSR) approaches.

Here's how to achieve ISR in Next.js:

1. Configure Your Page for Static Generation (SSG): First, you need to create a page that is statically generated. This typically involves using the getStaticProps function to fetch data and pre-render the page at build time.

2. Specify Revalidation Time: In the getStaticProps function, set the revalidate key to specify how often Next.js should attempt to re-generate the page. This is the core feature that enables ISR.

3. Deploy to a Compatible Hosting Provider: Ensure that your hosting provider supports ISR. Vercel, the company behind Next.js, provides excellent support for ISR out of the box. Other providers may require additional configuration.

To achieve Incremental Static Regeneration (ISR) in Next.js using TypeScript, you can use the getStaticProps function with the revalidate option. Here's a step-by-step example:

Let's say you have a blog application where you want to dynamically generate pages for individual blog posts.

1. Install Dependencies:

Make sure you have Next.js installed along with any necessary TypeScript dependencies:

npm install next react react-dom
# or
yarn add next react react-dom

2. Create a TypeScript Page:

Create a TypeScript file for your dynamic page. For example, if you want to create pages for individual blog posts, create a file like pages/posts/[slug].tsx.

// pages/posts/[slug].tsx

import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';

interface Post {
  title: string;
  content: string;
}

interface PostProps {
  post: Post;
}

export const getStaticPaths: GetStaticPaths = async () => {
  // Fetch the list of post slugs dynamically
  const slugs = ['post-1', 'post-2']; // Replace this with your data fetching logic

  const paths = slugs.map((slug) => ({
    params: { slug },
  }));

  return {
    paths,
    fallback: 'blocking', // or true
  };
};

export const getStaticProps: GetStaticProps<PostProps> = async ({ params }) => {
  // Fetch individual post data based on the slug
  const post: Post = {
    title: `Post ${params.slug}`,
    content: 'This is the content of the post.',
  };

  return {
    props: {
      post,
    },
    revalidate: 60, // Re-generate page after 60 seconds
  };
};

const PostPage: React.FC<PostProps> = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </div>
  );
};

export default PostPage;

In this example:

• getStaticPaths: Fetches the list of post slugs dynamically and returns an array of paths. The fallback option is set to 'blocking', which means that Next.js will serve a static page with a loading state until the data for the requested post is fetched. You can also use true instead of 'blocking' if you want to serve a static page with an empty shell initially.

• getStaticProps: Fetches individual post data based on the slug and returns it along with the revalidate option. The revalidate option specifies how often the page should be regenerated. In this example, it's set to 60 seconds.

• The PostPage component renders the title and content of the post. If the page is still loading (router.isFallback), it shows a loading indicator.

With this setup, Next.js will automatically handle the static generation and regeneration of pages at runtime, ensuring that your pages are both statically generated and periodically updated.