StaticProps vs ServerSideProps in NextJS

GetStaticProps or GetServerSideProps, which one should you choose when fetching content for your pages in NextJS?

First, let's define what SSR and CSR are.

Server Side Rendering (SSR)

This is the more traditional render approach, where all the javascript resources of your webpage are hosted and executed by the server. When the page is requested, the HTML is then directly pre-rendered and delivered to the browser.

Client Side Rendering (CSR)

This is a more recent approach to rendering, where the app is basically fully rendered on the client side (on the browser) via a framework. The client will first fetch an HTML, then download the JavaScript files in order to reconstruct the page. The whole rendering process is made by the user's computer and not by the server

Which approach for which case

Generally, it is best to use Server Side Rendering for static pages, where the content is rarely updated.

On the contrary, your go-to option for a modern web app is Client Side Rendering. It allows you to access a robust selection of JavaScript libraries and therefore makes your app more interactive.

This quote from Adam Zerner describes which one to choose perfectly:

With server-side rendering, whenever you want to see a new web page, you have to go out and get it, this is analogous to you driving over to the supermarket every time you want to eat. With client-side rendering, you go to the supermarket once and spend 45 minutes walking around buying a bunch of food for the month. Then, whenever you want to eat, you just open the fridge.”

GetStaticProps or GetServerSideProps?

Now that we have a very basic understanding of SSR and CSR, we can get on to the topic of the data fetching function that comes in NextJS called GetStaticProps and GetServerSideProps.

GetStaticProps

export const getStaticProps = async () => {
  const data = await getData()

  return {
    props: {
      data,
    },
  }
}

• Has the fastest loading time because it lets the page be statically generated by the browser.
• It is mostly used inside a page component to fetch data at build time.
• The data is rendered before it reached the client.
• The data will be refreshed only when another build is requested.

GetServerSideProps

export const getServerSideProps = async () => {
  const data = await getData()

  return {
    props: {
      data,
    },
  }
}

• The information stays up to date all the time.
• Is used to fetch data every time a user request one of your pages (at run time).
• Before sending the page to the client, it will fetch the data, and again every time when a new request is made.

So in order to decide on which to choose you to need to determine the nature of your page requirement.

It is better to render your page at run time (SSR) when you need a lot of dynamic data on your page, or basically when you don't know what the user wants before making a request.

If your page is more simple, for example, a blog post, then you'll prefer to render the page at build time (CSR) since you'll get better performance. In short, GetStaticProps is better when you know what the user wants to see.