Getserversideprops vs Getinitialprops

Welcome getStaticProps and getServerSideProps!

While keeping retro compatibility with getInitialProps, Next.js 9.3 introduces new data-fetching primitives. These will improve both developer and user experience by giving a more granular control on the timings of data fetching. Let's dive into them.

getServerSideProps is very similar to getInitialProps, meaning that it gets called every time that you load the page, but the code is only executed on the server. This way, you don't have to worry about the execution of data fetching code in both server and browser environments, which have some inconsistencies. In many cases, this increases performance as the server will generally have a faster connection to the data source. It also increases security by exposing less of the data fetching logic.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Surely a nice improvement, but wait, the serious news will come with getStaticProps. The function signature is the same as getServerSideProps, but the behavior is different.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}