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.
Top comments (0)