Nextjs Static Site Generation And Incremental Static Regeneration Complete Guide

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

Static Site Generation (SSG)

Static Site Generation occurs at build time where your application pre-renders pages into static HTML. When a request is made to the page, this static HTML is served directly to the user, which is incredibly fast and efficient. SSG is particularly advantageous for content that doesn't change frequently—think blog posts, documentation sites, or e-commerce catalogs.

Key Features:

• Performance: SSG provides a high level of performance because browsers can cache the generated HTML. Subsequent requests for the same page benefit from faster load times.
• SEO: Search engines can easily crawl static pages, optimizing your site's visibility and ranking.
• Scalability: Hosting static sites is typically cheaper and more scalable as they don’t require a server to render the pages at request time.

Implementation Steps:

1. Define getStaticProps: This function runs at build time and returns the props needed by the page component.
2. Export from Page: Ensure that your getStaticProps is exported from the page component file.
3. Build Process: When you run next build, Next.js uses this data to pre-render and create static pages.

Code Example:

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

  return {
    props: {
      data,
      // Re-validates page if API response changes
      revalidate: 10, // In seconds
    },
  };
}

function MyStaticPage({ data }) {
  // Render data...
}

export default MyStaticPage;

In this example, getStaticProps fetches data from an API and passes it to the component when the page is built.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration, introduced in Next.js 9.5, extends the benefits of SSG by allowing pages to regenerate without re-building the entire site. ISR powers a hybrid model by combining the best features of SSG and SSR. Pages are rendered at build time with getStaticProps. After deployment, you can set a revalidation period (e.g., every 10 seconds) and allow the page to be updated when new content is available.

Advantages of ISR:

• Fresh Content: Content stays fresh between revalidation periods, ensuring you serve up-to-date information without compromising performance.
• Improved Performance: Combines the speed benefits of SSG with the dynamism of SSR by only re-generating specific pages, not the entire site.
• Cost-Effective: By updating individual pages, ISR avoids unnecessary builds and resource consumption.

Implementation Steps:

1. Use getStaticProps: Fetch data as you would with regular SSG.
2. Add Revalidation Period: Include revalidate key within getStaticProps return object specifying how often the page should revalidate.
3. On-Demand Regeneration: For use-cases where you need to update a page outside the scheduled revalidation, you can use the unstable_revalidate method to regenerate pages on demand.

Code Example:

export async function getStaticProps(context) {
  const { id } = context.params;

  const res = await fetch(`https://api.example.com/products/${id}`);
  const productData = await res.json();

  return {
    props: {
      productData,
    },
    // Revalidate the page every 10 seconds
    revalidate: 10,
  };
}

function ProductPage({ productData }) {
  // Render product details...
}

export default ProductPage;

This example demonstrates fetching detailed product information during the build process, and setting a 10-second revalidation period so the page can stay fresh with updated product data.

Comparison of SSG and ISR

| Feature | SSG | ISR | |--------------------------|------------------------------------------|--------------------------------------------| | Timing | At build time | At build time & periodically/when triggered| | Use Case | Content that doesn’t change much | Dynamic content requiring frequent updates | | Performance | Very fast, due to caching | Fast, due to selective updates | | SEO | Best, static HTML | Good, static HTML but with potential delays | | Hosting | Suitable for platforms like Vercel, Netlify| Suitable for platforms like Vercel, Netlify| | Cost | Low | Low, with targeted revalidations |

Real-World Applications

• News Sites: Articles and news pieces can be generated statically and refreshed periodically using ISR.
• E-commerce Portals: Product listings can be statically generated and updated when products are added, modified, or removed using on-demand regeneration.
• Documentation: Tech docs that evolve over time can use ISR to ensure they are always up-to-date while benefiting from SSG’s performance.