Understanding the Differences Between SSR, SSG, and ISR in Next.js

Introduction

Next.js is a popular framework for building React applications, providing developers with a powerful set of features to enhance the performance and user experience of their web applications. Three of the essential concepts in Next.js are Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). In this article, we will delve into these concepts, understand their differences, and provide easy-to-follow examples to illustrate each one.

1. Server-Side Rendering (SSR)

Server-Side Rendering is a technique that allows generating HTML content on the server and sending a fully rendered page to the client. This means that when a user requests a page, the server processes the request, fetches the necessary data, and renders the page before sending it to the client’s browser.

How SSR Works:

1. The client sends a request to the server for a specific page.
2. The server receives the request and executes the appropriate code to generate the HTML content of the requested page, which may include fetching data from APIs or databases.
3. The server then sends the fully rendered HTML page as a response to the client.
4. The client’s browser receives the HTML and displays the page to the user.

Example:

Consider a basic Next.js application with a simple component that displays a list of items fetched from an API. With SSR, the list would be pre-rendered on the server before being sent to the client.

// pages/items.js

import React from 'react';

const Items = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API or database
  const res = await fetch('https://example-api.com/items');
  const items = await res.json();

  return {
    props: {
      items,
    },
  };
}

export default Items;

In this example, the getServerSideProps function runs on the server during the initial request, fetching the data and passing it as a prop to the Items component. The server then renders the component with the data and sends the fully-rendered page to the client.

2. Static Site Generation (SSG)

Static Site Generation is a technique that generates HTML pages at build time instead of generating them on each request. This results in faster loading times and improved performance as the pre-rendered HTML pages can be directly served to the client without any additional processing on the server.

How SSG Works:

1. During the build process, Next.js pre-renders all the pages specified for Static Site Generation.
2. The pre-rendered HTML pages are then stored in a cache and served directly to the client on subsequent requests.
3. If data changes or revalidation is required, the pages can be regenerated at build time or on a defined schedule.

Example:

Continuing from the previous example, let’s modify the Next.js application to use Static Site Generation for the items list.

// pages/items.js

import React from 'react';

const Items = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export async function getStaticProps() {
  // Fetch data from an API or database
  const res = await fetch('https://example-api.com/items');
  const items = await res.json();

  return {
    props: {
      items,
    },
  };
}

export default Items;

In this example, we replaced getServerSideProps with getStaticProps. Now, during the build process, Next.js will fetch the data from the API and pre-render the Items page with the fetched data. The pre-rendered HTML page will be served to the client on every request, resulting in faster page loads.

3. Incremental Static Regeneration (ISR)

Incremental Static Regeneration is a feature of Next.js that allows you to update pre-rendered pages with new data, without the need to rebuild the entire application. It provides a balance between static generation and dynamic rendering, allowing developers to specify a revalidation interval to update the data on a defined schedule.

How ISR Works:

1. During the build process, Next.js pre-renders the pages specified for Incremental Static Regeneration, similar to SSG.
2. Instead of relying solely on build-time data, ISR allows you to define a revalidation interval (in seconds).
3. After the initial request, subsequent users will receive the pre-rendered page from the cache. However, in the background, Next.js will check if the revalidation interval has passed.
4. If the interval has passed, Next.js will fetch new data, re-render the page, and update the cache. This updated data will be served to future users, ensuring the page stays up-to-date without requiring a full rebuild.

Example:

Let’s extend the previous example and add Incremental Static Regeneration to update the items list on a regular basis.

// pages/items.js

import React from 'react';

const Items = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export async function getStaticProps() {
  // Fetch data from an API or database
  const res = await fetch('https://example-api.com/items');
  const items = await res.json();

  return {
    props: {
      items,
    },
    revalidate: 3600, // Revalidate and update data every hour (in seconds)
  };
}

export default Items;

In this example, we added the revalidate property to getStaticProps, setting it to 3600 seconds (1 hour). After the initial request, if one hour has passed, Next.js will fetch new data and update the items list without requiring a full rebuild. This way, users will see up-to-date content on subsequent visits while still benefiting from the performance gains of pre-rendering.

Conclusion

In conclusion, Next.js offers powerful rendering options to suit various use cases and performance requirements. Understanding the differences between Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR) is essential for making informed decisions about how to build and optimize your Next.js applications.

• Use SSR when you need to generate HTML on each request and require real-time data fetching and rendering.
• Use SSG for static content that doesn’t change frequently, as it provides better performance with pre-rendered HTML pages.
• Use ISR when you want to combine the benefits of SSG with the ability to update data at regular intervals without rebuilding the entire application.

By leveraging these Next.js features effectively, you can create blazing-fast and highly efficient web applications, delivering a superior user experience to your audience.

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us on Twitter, LinkedIn, YouTube, and Discord.