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

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:

At build time, the blog posts are statically generated.
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.
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.

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

Comments

More from this blog

The Most Useful AI Workflow I’ve Built Isn’t About Writing Code

Three AI Agents, One Spec

The Space Between Intention and Impact

The Weight of the First Word

When Not Having the Answer Is the Answer

When to use:

Example: Building a Blog with SSG and ISR

Step 1: Create the Blog Page with Dynamic Routes

File Structure:

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

Step 3: Revalidate Data Using ISR

How It Works:

Benefits:

Command Palette

Comments

More from this blog

When to use:

Example: Building a Blog with SSG and ISR

Step 1: Create the Blog Page with Dynamic Routes

File Structure:

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

Step 3: Revalidate Data Using ISR

How It Works:

Benefits: