Next.js CSR, SSR, SSG, and ISR: How to Select a Data Fetching Method

Table of Content

• What are Next.js Data Fetching Methods?
• How to Decide Which Next.js Data Fetching method to Use
• How to Choose Next.js Data Fetching Method Using Performance Metric
• How to choose Next.js Data Fetching method Using Build-time Metric
• How to choose Next.js Data Fetching method Using SEO Metric
• How to Choose Next.js Data Fetching method Using Data Staleness Metric
• Table Comparison of All Metrics for Selecting Next.js Data Fetching Technique
• How does Next.js Client-Side Data Fetching render a Page?
• When Should Next.js Client-Side Rendering (CSR) be Used?
• How does Next.js Server-Side Rendering (SSR) render a Page?
• When Should Next.js Server-Side Rendering (SSR) be Used?
• How does Next.js Static-Site Generator (SSG) render a Page?
• When Should Next.js Static-Site Generator (SSG) be Used?
• How does Next.js Incremental Static Regeneration (ISR) render a Page?
• When Should Next.js Incremental Static Regeneration (ISR) be Used?
• Can you use More Than one Next.js Data Fetching Method in a Project?
• Wrap Off

Next.js framework offers a plethora of methods for performing data fetching.

All of these methods can negatively or positively impact your project's efficiency and performance depending on how you use them.

Sometimes, it can be hard to choose between them.

In this post, you will get detailed metrics on how to select a Next.js data fetching method that will best suit your use case and ensure you get the most out of Next.js.

The metrics we analyze will work for all use cases of a project.

However, there might be some cases where I do not advise you to apply these metrics.

This post focuses on how to choose between Next.js Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generator (SSG), and Incremental Static Regeneration (ISR).

If you like to see the technical difference and code example between CSR, SSR, SSG, and ISR, I encourage you to read my post on Everything to Know About Next.js Data Fetching Using CSR, SSR, SSG, and ISR.

Before we begin, let's have a short recap of what they are.

What are Next.js Data Fetching Methods?

Let's review the last blog to remember what are the characteristics of each.

• Static Site Generator (SSG): Here, the data from the API endpoint is fetched once at build time.

  The Static Site Generator (SSG) data fetching method is done using the getStaticProps() and getStaticPaths() function in Next.js.

• Server-Side Rendering (SSR): Here, the data from the API endpoint is fetched before every single render.

  The Server-Side Rendering (SSR) data fetching method is done using the getServerSideProps() function in Next.js.

• Incremental Static Regeneration (ISR): Here, the data from the API endpoint is fetched once on build time and will be fetched again after the revalidate period expires, and served on the second visit using hard reload.

  The Incremental Static Regeneration (ISR) data fetching method is done using the getStaticProps() and getStaticPaths() function in Next.js, using the revalidate prop.

• Client-Side Rendering (CSR): Here, the data from the API endpoint is fetched after every single render.

  The Client-Side Rendering (CSR) can be done using React.js useEffect or a client-side data fetching library like SWR or React Query.

Read more: What is Next.js On-demand Incremental Static Regeneration and How to Use it?

How to Decide Which Next.js Data Fetching method to Use

Here are four metrics you can use to choose the best Next.js data fetching method:

1. Performance
2. Build-time
3. SEO
4. Data staleness

We will now take a look at each of these metrics.

How to Choose Next.js Data Fetching Method Using Performance Metric

We define performance as the loading state of the page we visit.

Performance in this context does not imply the entire application's performance.

It means focusing on the time it takes to load a page before the First Contentful Paint.

Two ways to measure Next.js data fetching based on performance

• Instant page load

  This event occurs when the page loads instantly without a delay or loading screen.

  This happens because there is no data fetching done when the page is visited. E.g. SSG and ISR.

• Page load before or after a render

  This event occurs when there is a delay or loading screen when the page is visited, even if it's slightly.

  This happens because there is no data fetching done when the page is visited. E.g. SSG and CSR.

Tabular Comparison of the Performance Metric

How to choose Next.js Data Fetching method Using Build-time Metric

We define build time as the overall amount of time it takes to create a production build of the project when we run npm run build, and when the case applies, deploy it.

You should give this metric some special consideration when generating a bunch of pages with multiple slug pages or deeply nested pages.

An example is an eCommerce website with the slug product/[name].

Three ways to measure Next.js data fetching based on build-time

• Quick Speed build

  This happens when the build takes a very short time to completely execute.

  You will see this occur when we build pages that do not require the entire project page data to be completely fetched at build time. E.g CSR and SSR.

  Data is fetched when the page is visited.

• Medium Speed Build

  This occurs when fetching part of the pages at build time and the rest at the time the page is visited.

  The build can be faster if there is a single slug page. However, it can also be slower for multiple slug pages, but not too slow to be classified under slow.

  An example is the Incremental Static Regeneration (ISR) data fetching method that only builds a single slug page (usually the first) at build-time, and builds the rest when the page is visited.

• Slow Speed Build

  This build type occurs when all the pages are fetched at build time.

  The build-time is generally slower since it has to build all the pages returned from the slugs.

  Assuming we have a slug that returns 1000 to 10,000 items, it can take a while.

  An example is the Static-Site Generation (SSG) data fetching method.

Tabular Comparison of the Build-Time Metric

How to choose Next.js Data Fetching method Using SEO Metric

Search Engine Optimization (SEO) is useful when we want to create a website whose content can be quickly indexed by Google.

Having our content be easily found on Google or other search engines is a good way to draw in organic visitors to our website.

Two ways to measure Next.js data fetching based on SEO

• Good for SEO

  This occurs when we pre-render the content on the website.

  When we pre-render the website content, the content appears on the page source, which helps search engines understand the page content and index the page for the right keywords.

  Examples of Next.js data fetching techniques for SEO are Server-Side Rendering (SSR), Static Site Generator (SSG), and Incremental Static Regeneration (ISR) because the HTML content is pre-rendered with the content.

• Bad for SEO

  This occurs when we do not pre-render the content, rather, the page content is served from the client-side on the website.

  Be that as it may, you should know that even though the content of the page is not pre-rendered, the page can still be indexed by search engines.

  An example of Next.js data fetching method that is not SEO friendly is Client-Side Rendering (CSR).

This because we do not get any content until after the page renders.

Examples of websites built with Next.js that needs SEO

• Ecommerce website: this will enable the products and product categories to get indexed faster.
• Questions and Answers Website/Forums
• Social media
• News websites
• Blog posts and more
• Landing pages
• Marketing pages

Examples of websites built with Next.js that does not need SEO

• Website or web pages behind a paywall or authentication like a dashboard, premium content, or paid courses.

Tabular Comparison of the SEO Metric

How to Choose Next.js Data Fetching method Using Data Staleness Metric

Data staleness is a metric to use when considering the freshness of the data on the pages.

Three ways to measure Next.js data fetching based on Staleness of Data

• High Fresh Data

  This means that we want to regularly get fresh data i.e. the most updated data at every single render.

  This is usually crucial for pages that are interactive and contain some critical data that should not be stale such as stock/crypto price pages, social feeds, etc.

  Examples of the Next.js data fetching method that shows fresh data on every render are Server-side Rendering (SSR) and Client-Side Rendering (CSR) because we hit the API endpoint every time the page renders.

• Medium Fresh Data

  This means that we want to serve updated data, but not frequently and we can pardon stale data.

  An example of Next.js data fetching method for medium fresh data is Incremental Static Regeneration (ISR) because new data is fetched and the page rebuilds after the revalidate period expires…

• Low Fresh Data

  These are pages whose content rarely changes.

  An example of Next.js data fetching method for low or no fresh data is Static-site Generation (SSG) because new data is fetched at build-time only.

Examples of websites built with Next.js that needs high fresh data rendering

• Products page that contains prices
• Forum and social media comment section
• Social media feeds
• Financial exchange sites like cryptocurrency sites and stock price sites

Examples of websites built with Next.js that needs medium fresh data rendering

• Blog post with CMS
• User Profile page

Examples of websites built with Next.js that needs low fresh data rendering

• About page
• Privacy policy pages
• Terms and Conditions pages
• Some marketing pages

Tabular Comparison of the Staleness of Data Metric

Table Comparison of All Metrics for Selecting Next.js Data Fetching Technique

How does Next.js Client-Side Data Fetching render a Page?

For Next.js Client-Side Rendering (CSR), data fetching happens on the browser.

Hence, we may see a loading indicator while the application is being rendered.

The performance i.e the initial page load depends on the size of the application and how much JavaScript is shipped to the browser.

It's important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages.

This is because the data fetching is done at the time the component or pages mount, and the data is not cached.

When Should Next.js Client-Side Rendering (CSR) be Used?

So far, from the metrics we have covered, client-side data fetching in Next.js is useful

• When your page doesn't require SEO indexing
• When you don't need to pre-render your data
• When the content of your pages needs to update frequently.

How does Next.js Server-Side Rendering (SSR) render a Page?

For Next.js Server-Side Rendering (SSR), the content is rendered on the server before sending it to the browser.

There may be some delay depending on the server's location and/or performance because the request has to be sent to the server and we get back a response with the content.

When Should Next.js Server-Side Rendering (SSR) be Used?

So far, from the metrics we have covered, Server-Side Rendering (SSR) in Next.js is useful

• When you need to pre-render a page whose data must be fetched at request time.

How does Next.js Static-Site Generator (SSG) render a Page?

For Next.js Static-Site Generator (SSG), the content is rendered at a build time on the server, and the result is cached in CDNs closer to users.

That way, subsequent requests may load faster.

This improves performance because rendering happens once the content is stored closer to users and served without latency.

When Should Next.js Static-Site Generator (SSG) be Used?

So far, from the metrics we have covered, Static Site Generator (SSG) in Next.js is useful

• When the data comes from a headless CMS
• When the data comes from a database
• When the data comes from the filesystem
• When the data can be publicly cached
• When the page must be pre-rendered for SEO and be very fast

How does Next.js Incremental Static Regeneration (ISR) render a Page?

For Next.js Incremental Static Regeneration (ISR), the content is rendered at time intervals and cached in CDNs closer to users. That way, subsequent requests may load faster.

Hence, It is still performant and ensures data doesn't become stale.

When Should Next.js Incremental Static Regeneration (ISR) be Used?

So far, from the metrics we have covered, Incremental Static Regeneration (ISR) in Next.js is useful:

• When you want to use static generation on a per-page basis without needing to rebuild the entire site.
• When you want to retain the benefits of static while scaling to millions of pages.

Can you use More Than one Next.js Data Fetching Method in a Project?

Yes, you can. Next.js makes it very flexible to create a hybrid project using more than one data fetching method.

If the use case permits it, you can use all four methods.

This blog and portfolio use three of the Next.js data fetching techniques: SSG, SSR, and ISR.

However, it does not mean you should use them for the fun of it.

Learn the use case and apply the right data fetching technique where it is needed as we did on this platform.

You can contact us to learn about the Next.js data fetching technique we used for each part of the platform.

Wrap Off

In this post, we showed you detailed metrics on how to select a Next.js data fetching method that will best suit your use case and ensure you get the most out of Next.js.

The metrics we analyze that will work for all use cases of a project are performance, build-time, SEO, and data staleness.

If you learned from this post, please consider sharing and subscribing to our newsletter to receive posts like these delivered to your mail.