DEV Community

Cover image for Next.js: Static Site Generation (SSG) with Incremental Static Regeneration (ISR)
Reme Le Hane
Reme Le Hane

Posted on • Originally published at remejuan.substack.com

1

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
Enter fullscreen mode Exit fullscreen mode

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} />;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay