Next.js

Quick Tip: When to Choose SSG or SSR in Next.js

Are you debating over SSG and SSR in Next.js? It shouldn’t be difficult. Let us discuss and choose the one that suits your needs.

Before we begin, take a quick look at the data fetching methods.

Data fetching in Next.js SSG vs SSR

Data Fetching

Next.js allows you to fetch data and prerender them or render them in real time. Prerendering generates HTML before the page gets rendered. This helps to improve SEO rankings and the amount of JavaScript on the page will be less compared to non-prerendered pages.

Once the page gets prerendered, hydration makes the components interactive. That is, the initial loading of the page may have links, but the links will be clickable and work after JavaScript gets loaded.

This is better than looking at a blank page and waiting for all the HTML, including JavaScript, to be loaded. Now that we have an idea about pre-rendering, let’s talk about its two types Static Site Generation (SSG) and Server-Side Rendering (SSR).

What is SSG?

SSG allows you to generate HTML at once during the build time. Next.js provides a method called getStaticProps() for generating static pages.

You can add revalidate property to your getStaticProps method and incrementally regenerate the static pages. This avoids rebuilding the whole application. If you want to use dynamic routing with the static generation you should use getStaticPaths to generate the paths.

What is SSR?

In SSR, the HTML is generated on each request. Use getServerSideProps to fetch data when a user makes a request.

As every request goes to the server, the time to the first byte will be higher than a static generation. You can use query parameters and HTTP headers with SSR.

Here is the summary of SSG, SSR, and Client-side Rendering (CSR):

Feature SSG SSR CSR
Build time Fast for fewer pages

Gets slow when pages are more

Builds every page

Fast

 

Builds single page

Fast

 

Builds single page

SEO Good Good Not much SEO friendly since the content is loaded on the client-side
Performance Fast Slow than SSG Slow than SSG
Use cases Blog posts

E-commerce product listings

Help and documentation

Any page that requires query parameters or HTTP headers Pages that do not require any pre-rendered data

Things to consider…

You can use SSG and SSR on your app. If you have to fetch data based on a user’s query, like a search page, then use SSR. Other pages can be statically generated.

If your application has more client-side interactions and doesn’t have to pre-render the content, then use the client-side rendering.

I hope this comparison helps you to choose the right data fetching method for your needs, for further reading visit Next.js documentation. Looking for more? Read our Next.js quick tips and articles

Comments

Have a comment?

Your email address will not be published.

accessibilityadminaggregationanchorarrow-rightattach-iconbackupsblogbookmarksbuddypresscachingcalendarcaret-downcartunifiedcouponcrediblecredit-cardcustommigrationdesigndevecomfriendsgallerygoodgroupsgrowthhostingideasinternationalizationiphoneloyaltymailmaphealthmessagingArtboard 1migrationsmultiple-sourcesmultisitenewsnotificationsperformancephonepluginprofilesresearcharrowscalablescrapingsecuresecureseosharearrowarrowsourcestreamsupportunifiedupdatesvaultwebsitewordpress