Next.js is a React framework that supports pre-rendering. Instead of having the browser render everything from scratch, Next.js can serve pre-rendered HTML in two different ways:

• SSR (Server-side rendering)
• SSG (Static-site generation)

SSR: It generates HTML file on each request. This is useful if your page is having dynamic data which is frequently changing. The perfomance of SSR is less then the SSG. For data fetching in SSR, Next.js provides getServerSideProps function which pre-renders page at runtime i.e. page pre-renders at each request.

SSG: It generates HTML file at time of build. You can generate SSG page with or without data. If the page is generated with data then that data will never change whenever you visit that page. Performance of the SSG is better then SSR. If you have alot of SSG file in your project then its gonna take alot of time to build the production app. For data fetching in SSR, Next.js provides getStaticProps & getStaticPaths functions which pre-renders page at build time and same pre-rendered file is used again and again on each new request.

When to use SSR or SSG ?

Well to answer this question you should ask to yourself whether you current page will have dynamic data or static data? Will the data on the current page is going to change in future? If you data is dynamic which is going to change in future then you should always prefer SSR over SSG. If none of the above cases is required then you can should go for SSG.

If you are concerns about SEO then you shouldn’t be because SEO is same for both SSR and SSG. Pick any one, SEO will be same.

Let’s see some cases where we can user SSR: 

• Products page that contains price → imagine you have a product page, and the price shown is not the most updated one. You might lose some dough.
• The comment section on Twitter → we want to see the most recent comment
• Social media → we want to see the most up-to-date content obviously.

Let’s see some cases where we can user SSG: 

• About page→This page shows the company information, which will be written directly in the app’s source code. No need to fetch data.
• Landing page → Most of the webapp’s landing page does not required updated data so we can use SSG for landing page.
• Login/Sign Up

SSG

SSG is more performant, but because pre-rendering happens ahead of time, the data could become stale at request time. Fortunately, there are ways to work around this issue without rebuilding the entire app when the data is updated. With Next.js, you can use Static Generation for maximum performance without sacrificing the benefits of Server-side Rendering.

• Incremental Static Generation: Add and update statically pre-rendered pages incrementally after build time.
• Client-side Fetching: Statically generate parts of the page without data, and fetch the data on the client-side.