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

In the world of modern web development, performance and SEO are king. Next.js offers two powerful data-fetching strategies to help you achieve lightning-fast load times: Static Site Generation (SSG) and Incremental Static Regeneration (ISR). Understanding these concepts is essential for building scalable, production-ready applications.

What is Static Site Generation (SSG)?

Static Site Generation is the process of generating your website's HTML at build time. This means that when you run the build command, Next.js fetches the necessary data and creates a physical HTML file for every page in your application. When a user visits your site, the server simply sends this pre-generated file, resulting in near-instant page loads.

How SSG Works (The Lifecycle)

[Developer] -> Runs 'npm run build'
      |
      V
[Next.js] -> Executes getStaticProps()
      |
      V
[Data Fetching] -> Fetches data from API/Database
      |
      V
[HTML Generation] -> Pre-renders React components into Static HTML
      |
      V
[Deployment] -> HTML files uploaded to a CDN
    

Implementing SSG with getStaticProps

To use SSG in Next.js, you export an async function called getStaticProps from your page file. This function runs only on the server side during the build process.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Blog;
    

Dynamic Routes and getStaticPaths

If you have dynamic routes (e.g., /posts/[id]), Next.js needs to know which IDs exist at build time to generate the corresponding HTML files. This is where getStaticPaths comes in.

• getStaticPaths: Defines the list of paths to be rendered to HTML at build time.
• fallback: A property that determines what happens if a user requests a path that wasn't generated at build time (can be true, false, or 'blocking').

What is Incremental Static Regeneration (ISR)?

While SSG is great, it has a limitation: if your data changes, you must rebuild and redeploy your entire site. Incremental Static Regeneration (ISR) solves this by allowing you to update static pages after you've built your site, without needing a full rebuild.

By adding a revalidate property to getStaticProps, you tell Next.js to refresh the data in the background after a certain number of seconds.

The ISR Workflow

1. User requests Page A -> Next.js serves the cached HTML.
2. Revalidate timer (e.g., 60s) has passed.
3. Next request triggers a background data fetch.
4. If fetch is successful, Next.js generates new HTML.
5. Future users receive the updated HTML.
    

Example of ISR

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return {
    props: { products },
    // Re-generate the page at most once every 10 seconds
    revalidate: 10, 
  };
}
    

Real-World Use Cases

• SSG: Best for marketing pages, documentation, and personal blogs where content doesn't change frequently.
• ISR: Perfect for e-commerce product listings, news sites, or large-scale blogs where content updates occasionally but you still want the speed of static files.

Common Mistakes to Avoid

• Using SSG for User-Specific Data: Since SSG happens at build time, it cannot know who the current user is. Use Client-Side Fetching or Server-Side Rendering (SSR) for personalized dashboards.
• Forgetting the Fallback Property: In getStaticPaths, setting fallback: false will show a 404 for any new content added after the build. Use 'blocking' or true for dynamic content.
• Low Revalidation Times: Setting revalidate: 1 might put unnecessary load on your API. Choose a sensible window based on how often your data actually changes.

Interview Notes: SSG vs. SSR vs. ISR

• SSG: Fastest performance, best for SEO, generated at build time.
• SSR: Generates HTML on every request. Slower than SSG but always shows the freshest data.
• ISR: The "best of both worlds." Static speed with the ability to update data without a full redeploy.
• Question: "When would you use ISR over SSR?" Answer: When the data changes but doesn't need to be updated on every single click, allowing you to benefit from CDN caching.

Summary

Static Site Generation (SSG) makes your Next.js applications incredibly fast by pre-rendering pages during the build process. Incremental Static Regeneration (ISR) takes this a step further by allowing those static pages to update in the background as your data changes. By mastering these two techniques, you can build websites that are both highly performant and easy to maintain.

In the next lesson, we will explore Server-Side Rendering (SSR) to understand how to handle highly dynamic, user-specific data.