What is Pre-rendering?

Pre-rendering is the process of generating HTML for a page at build time or request time, instead of doing it on the client-side. Pre-rendering improves the performance and SEO of a page, as it reduces the loading time and makes the content visible to search engines.

Next.js has two forms of pre-rendering: SSR and SSG. The difference is in when it generates the HTML for a page.

What is SSR?

With SSR, the HTML is generated on the server for each request. This means that the page is always up to date with the latest data, but it also requires more server resources and can increase the response time.

SSR is suitable for pages that need dynamic data or user-specific content, such as a dashboard or a profile page. To use SSR in Next.js, you can use the getServerSideProps function in your page component. This function runs on the server and returns the props for the page.

For example, the following code fetches some data from an external API and passes it to the page component as props:

export default function Home({ data }) {
  return <main>// Use data</main>;
}

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch("https://.../data");
  const data = await res.json();

  // Will be passed to the page component as props
  return {
    props: {
      data,
    },
  };
}

What is SSG?

With SSG, the HTML is generated at build time and will be reused on each request. This means that the page is fast and can be cached by a CDN, but it also means that the data is static and may not reflect the latest changes.

SSG is suitable for pages that do not need dynamic data or user-specific content, such as a blog post or a landing page. To use SSG in Next.js, you can use the getStaticProps function in your page component. This function runs at build time and returns the props for the page.

For example, the following code fetches some data from an external API and passes it to the page component as props:

export default function Home({ data }) {
  return <main>// Use data</main>;
}

export async function getStaticProps() {
  // Fetch data from external API
  const res = await fetch("https://.../data");
  const data = await res.json();

  // Will be passed to the page component as props
  return {
    props: {
      data,
    },
  };
}

What is ISR?

ISR is a hybrid of SSR and SSG. With ISR, the HTML is generated at build time and will be reused on each request, but it can also be revalidated in the background and updated incrementally. This means that the page is fast and can be cached by a CDN, but it can also reflect the latest data without rebuilding the entire site.

ISR is suitable for pages that need dynamic data but do not need to be updated instantly, such as a product page or a news article. To use ISR in Next.js, you can use the getStaticProps function in your page component and specify a revalidate option. This option determines how often the page should be revalidated in seconds.

For example, the following code fetches some data from an external API and passes it to the page component as props, and revalidates the page every 10 seconds:

export default function Home({ data }) {
  return <main>// Use data</main>;
}

export async function getStaticProps() {
  // Fetch data from external API
  const res = await fetch("https://.../data");
  const data = await res.json();

  // Will be passed to the page component as props
  return {
    props: {
      data,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  };
}

How to Choose the Right Rendering Method?

The choice of the rendering method depends on the type of data and the frequency of updates that your page needs. Here are some general guidelines:

• Use SSR if your page needs dynamic data or user-specific content that must be updated on every request.
• Use SSG if your page does not need dynamic data or user-specific content and can be pre-rendered at build time.
• Use ISR if your page needs dynamic data but does not need to be updated on every request and can be revalidated in the background.

You can also use different rendering methods for different pages in your Next.js application, depending on their requirements.

Conclusion

In this post, we have learned the differences between ISR, SSR, and SSG in Next.js and how to implement them in our pages. We have also seen how to choose the right rendering method for our pages based on the type and frequency of data.