Next.js is a React-based framework for building web applications, and it provides two primary approaches for rendering content: server-side rendering (SSR) and incremental static regeneration (ISR).

‍

What is SSR?

Server-side rendering (SSR) means that the web server generates HTML for each request, sending a fully rendered page to the user's browser. This allows for fast initial page loads and ensures that search engines can crawl and index the content of the page. However, because the server needs to generate HTML for every request, it can slow down the page's responsiveness and increase the load on the server.

In Next.js, SSR is achieved through the use of the getServerSideProps method. This method allows you to fetch data from an external API or database and pre-populate the page with that data before it’s sent to the client. This can be useful for pages that require dynamic data, such as a product page or a search results page.

‍

Example of SSR in Next.js

Let’s say you have a product page that displays information about a particular product. The information about the product is stored in a database and needs to be fetched dynamically.

Here’s an example of how you can use SSR to pre-populate the product page with data before it’s sent to the client:

// pages/product/[productId].js

import { getServerSideProps } from 'next';
import { getProductById } from '../../api/products';

function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { productId } = context.params;
  const product = await getProductById(productId);

  return {
    props: {
      product,
    },
  };
}

export default ProductPage;

‍

What is ISR?

Incremental static regeneration (ISR) is a feature of Next.js that allows for pre-rendering of pages at build time and then re-rendering them incrementally on a specified interval. This means that the first request for a page is still server-rendered, but subsequent requests are served from a cached version of the page. This approach can improve performance and reduce server load while still allowing for dynamic content updates.

In Next.js, ISR is achieved through the use of the getStaticProps method. This method allows you to pre-render a page at build time or runtime and set a revalidation time. When the revalidation time is reached, the page is re-rendered with the latest data, and the new version is served to the client. This can be useful for pages that require periodic updates, such as a news or weather page.

‍

Example of ISR in Next.js

Let’s say you have a news website that displays the latest news articles. The articles are updated frequently and need to be revalidated periodically.

Here’s an example of how you can use ISR to pre-render the news page at build time and update it periodically with new data:

// pages/news.js

import { getStaticProps } from 'next';
import { getLatestNews } from '../api/news';

function NewsPage({ articles }) {
  return (
    <div>
      {articles.map((article) => (
        <div key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.content}</p>
        </div>
      ))}
    </div>
  );
}

export async function getStaticProps() {
  const articles = await getLatestNews();

  return {
    props: {
      articles,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

export default NewsPage;

In this example, the getStaticProps function fetches the latest news articles from the getLatestNews API and returns them as a prop to the NewsPage component. The revalidate option tells Next.js to update the page every 60 seconds with the latest data. When a user visits the news page, they see a pre-rendered version of the page and then the page is updated in the background as new articles become available.

‍

Differences between SSR and ISR

The main difference between SSR and ISR is when the page is rendered. SSR renders the page on the server and sends a fully rendered page to the client, while ISR pre-renders the page and updates it in the background as new data becomes available.

Another difference is that SSR requires a server to render the page, while ISR can be pre-rendered at build time or runtime. This means that SSR can be slower to load than ISR, as it requires a round trip to the server, while ISR can be served from a CDN, resulting in faster load times.

SSR is better suited for pages that require dynamic data, such as a product page or a search results page, while ISR is better suited for pages that require periodic updates, such as a news or weather page.

‍

Conclusion

Next.js offers both SSR and ISR to improve the performance and user experience of your web applications. SSR is great for pages that require dynamic data and can improve SEO, while ISR is great for pages that require periodic updates and can lead to faster load times. Understanding the differences between these two features can help you choose the right one for your specific use case.