Static Site Generation (SSG), SSR, and ISR in Next.js 14+

Table of Contents

1. Introduction
2. What is Static Site Generation (SSG)?
3. What is Server-Side Rendering (SSR)?
4. What is Incremental Static Regeneration (ISR)?
5. Comparison of SSG, SSR, and ISR
6. Static Site Generation (SSG) in Next.js
7. Server-Side Rendering (SSR) in Next.js
8. Incremental Static Regeneration (ISR) in Next.js
9. Best Practices for Choosing Between SSG, SSR, and ISR
10. Conclusion

1. Introduction

Next.js has become one of the most popular frameworks for React, thanks to its ability to provide powerful features for server-side rendering, static site generation, and incremental static regeneration. These features allow developers to build fast, SEO-friendly, and highly optimized web applications. In Next.js 14+, these concepts have been further enhanced, making it easier to optimize content delivery and improve site performance.

In this module, we will deep dive into Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR), explaining how they work, when to use them, and their benefits and drawbacks in the context of Next.js.

2. What is Static Site Generation (SSG)?

Static Site Generation (SSG) is a process where HTML pages are pre-rendered at build time. This means that during the build process, Next.js generates static HTML for each page. These static pages are then served directly by the server, making them incredibly fast since they do not require runtime processing.

In an SSG approach, all pages are generated at build time, and if there is a need to update a page, a new build must be triggered. It is ideal for sites that do not change frequently or require real-time updates.

Example of Static Site Generation:

tsxCopyEdit// pages/posts/[id].js

export async function getStaticPaths() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  
  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

In this example:

• getStaticPaths: Pre-fetches the data needed to generate pages for all the available paths.
• getStaticProps: Fetches data at build time for a specific page.

Once the build is complete, the page will be available as static HTML.

3. What is Server-Side Rendering (SSR)?

Server-Side Rendering (SSR) refers to the process where pages are rendered on the server on every request, rather than at build time. With SSR, when a user requests a page, Next.js will generate the HTML on the fly, fetch any necessary data, and send the fully rendered page to the browser.

SSR is ideal for content that needs to be up-to-date on every request, such as dynamic data like user profiles, search results, or dashboards where real-time information is important.

Example of Server-Side Rendering:

tsxCopyEdit// pages/posts/[id].js

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

In this example:

• getServerSideProps: Fetches data on each request and renders the page server-side.
• The page is fully generated on every request, ensuring fresh data is served to the user.

4. What is Incremental Static Regeneration (ISR)?

Incremental Static Regeneration (ISR) combines the best aspects of both SSG and SSR. With ISR, pages are pre-rendered at build time, but the difference is that Next.js allows you to re-generate specific pages after the site has been built. This enables you to update static pages at runtime without rebuilding the entire site.

ISR works by allowing you to specify a revalidate period, and once the specified time has passed, Next.js will regenerate the page in the background when it is requested. This allows for static pages to be updated periodically, with minimal impact on performance.

Example of Incremental Static Regeneration:

tsxCopyEdit// pages/posts/[id].js

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

In this example:

• revalidate: 60: The page will be regenerated in the background after 60 seconds, allowing the page content to be updated periodically without needing a full rebuild.

ISR enables a hybrid approach where you can statically generate pages but still have them updated dynamically when necessary.

5. Comparison of SSG, SSR, and ISR

6. Static Site Generation (SSG) in Next.js

SSG is best for pages where content is not expected to change often. A typical use case for SSG in Next.js is a blog, documentation site, or a marketing landing page where the data changes infrequently.

To generate static pages in Next.js, you’ll typically use getStaticProps and getStaticPaths for dynamic routes.

Example of SSG for a blog:

tsxCopyEdit// pages/blog/[slug].js

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

  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/blog/${params.slug}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return <div>{post.content}</div>;
}

7. Server-Side Rendering (SSR) in Next.js

SSR is useful when you need to render pages with fresh data on every request, such as user profiles, dashboards, or pages with real-time updates.

To implement SSR in Next.js, you use getServerSideProps, which runs on every request and allows you to fetch the latest data.

Example of SSR for a user profile:

tsxCopyEdit// pages/users/[id].js

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return { props: { user } };
}

export default function UserProfile({ user }) {
  return <div>{user.name}</div>;
}

8. Incremental Static Regeneration (ISR) in Next.js

ISR is a powerful feature that allows you to combine the performance benefits of static site generation with the ability to update static content without needing a full rebuild.

To implement ISR in Next.js, you use getStaticProps with the revalidate option, which tells Next.js when to regenerate the page.

Example of ISR for updating a blog:

tsxCopyEdit// pages/blog/[slug].js

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/blog/${params.slug}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 60, // Regenerate every 60 seconds
  };
}

export default function Post({ post }) {
  return <div>{post.content}</div>;
}

9. Best Practices for Choosing Between SSG, SSR, and ISR

• SSG is ideal for static content that doesn’t change often, like blogs, documentation, and landing pages.
• SSR is suited for pages where the content needs to be up-to-date on every request, like user profiles or dynamic dashboards.
• ISR is best when you need static pages that are updated periodically (e.g., product pages or news articles that change over time).

Consider performance, data freshness, and scalability when deciding between these methods. For highly dynamic data, SSR might be the best, while for static but periodically updated pages, ISR will offer the best of both worlds.

10. Conclusion

Next.js 14+ has enhanced the flexibility of handling different rendering strategies, allowing developers to choose the best approach based on the type of content and user experience they want to create. By understanding SSG, SSR, and ISR, you can optimize your Next.js app for both performance and content freshness.

With these tools, Next.js enables you to build scalable, fast, and SEO-friendly web applications suited for a variety of use cases.