Next.js: Static Site Generation (SSG) with Incremental Static Regeneration (ISR)

static site generation

Next.js: Static Site Generation (SSG) with Incremental Static Regeneration (ISR). This allows you to build static pages that can be updated after deployment without needing a full rebuild.

When to use:

• You want the speed of static pages but also need to update content periodically (e.g., blog posts, news).

Example: Building a Blog with SSG and ISR

Let's say you're building a blog where the posts are stored in a CMS (like Sanity or a local JSON file). You can fetch the blog posts at build time, but with ISR, you can update them when new data is available.

Here’s how you can implement it:

Step 1: Create the Blog Page with Dynamic Routes

In the /app folder (using Next.js App Router), create dynamic pages for your blog posts:

File Structure:

/app
  /blog
    [slug]
      page.tsx

Step 2: Fetch Blog Posts Data (e.g., from a CMS or file)

// blog/[slug]/page.tsx
import { GetStaticProps, GetStaticPaths } from 'next';

// Simulated blog data (replace with actual CMS/API call)
const posts = [
  { id: 1, slug: 'first-post', title: 'My First Post', content: 'Hello world!' },
  { id: 2, slug: 'second-post', title: 'Another Post', content: 'More content here!' },
];

type Post = {
  id: number;
  slug: string;
  title: string;
  content: string;
};

export async function generateStaticParams() {
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// Page component
const BlogPost = ({ post }: { post: Post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

// ISR configuration
export const generateMetadata = async ({ params }: { params: { slug: string } }) => {
  const post = posts.find((p) => p.slug === params.slug);
  return { title: post?.title || 'Blog Post' };
};

// Fetch data for each post
export async function getPostData(slug: string): Promise<Post | undefined> {
  return posts.find((post) => post.slug === slug);
}

// Generate static params at build time
export default async function Page({ params }: { params: { slug: string } }) {
  const post = await getPostData(params.slug);
  if (!post) {
    // Render a 404 page if post is not found
    return <div>Post not found</div>;
  }
  return <BlogPost post={post} />;
}

Step 3: Revalidate Data Using ISR

In the getPostData function, we set a revalidate time (e.g., 60 seconds). This allows the static page to be updated periodically without requiring a full rebuild.

export async function generateStaticParams() {
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// Inside Page component
export const revalidate = 60; // Revalidate data every 60 seconds

How It Works:

1. At build time, the blog posts are statically generated.

2. If new posts are added or old posts are updated in your CMS, the ISR mechanism will re-fetch and update the page after 60 seconds when a new request is made.

3. This gives you the benefit of fast static pages with up-to-date content.

Benefits:

• Faster Pages: Since pages are statically generated, they load quickly.

• Auto-Updates: With ISR, you don't need to manually rebuild your site when content changes; Next.js handles it for you.

This combination of SSG and ISR is extremely powerful for any site where you want a balance of static performance and dynamic updates, such as blogs, e-commerce, or news websites.