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
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