When creating an application using this framework, you may need to get data from a file, an internal API path, or an external API.

Also, determining which data fetch method to use in a Next.js application can easily get confusing, especially since it is not as simple as making an API request within the render function of your components, as you would in an application. Standard React.

The following guide will help you carefully select the server-side data collection method that suits your application (FYI, you can use multiple methods in a single application). For each method, I described when it is executed and its benefits.

The following methods get data at compile time or on every request before the data is sent to the client.

getStaticProps (Static generation)

Get data at compile time.

The getStaticProps method can be used within a page to get data at compile time, eg when you run the next compilation. Once the application is compiled, it will not update the data until another compilation has been run.

Note: Added in Next 9.3

EXAMPLE

  export async function getStaticProps (context) {
   const res = await fetch (`https: //.../ data`)
   const data = await res.json ()
   if (! data) {
     return {
       notFound: true,
     }
   }
   return {
     props: {}, // will be passed to the page component as props
   }
 }
 
 

Benefits

• Allows the page to be generated statically and will produce fast load times of all data collection methods.
• If every page in your application uses getStaticProps (or no server-side fetch method), Next.js will be able to export it to static HTML using the following export. This is advantageous if you want to create a static site that can be hosted in places like GitHub pages.
• Data is processed before it reaches the customer, which is great for SEO.

getServerSideProps (server-side rendering)

Get data on every request.

The getServerSideProps method gets data every time a user requests the page. You will get the data before you send the page to the client (instead of loading the page and getting the data on the client side). If the customer makes a subsequent request, the data will be retrieved again.

Note: Added in Next 9.3

EXAMPLE

  export async function getServerSideProps (context) {
   const res = await fetch (`https: // ...`)
   const data = await res.json ()
   if (! data) {
     return {
       notFound: true,
     }
   }
   return {
     props: {}, // will be passed to the page component as props
   }
 }
 
 

Benefits

• The data is updated every time a customer loads the page, which means that it is up-to-date when they visit the page.
• Data is processed before it reaches the customer, which is great for SEO.

getInitialProps (Server-side Rendering)

Get data on every request.

getInitialProps was the original way to get data in a Next.js application on the server side. As of Next.js 9.3, you must use the methods discussed above. So why should I talk about getInitialProps ?:

1. It can still be used, although Next.js maintainers advise you not to, as getStaticProps and getServerSideProps allow you to choose between getting static or server-side data.

1. Knowing about getInitialProps helps when you come across an old Stack Overflow query that mentions it, and also that you shouldn't just copy paste that solution!

Note: If you are on Next.js 9.3 or higher, use the two methods above.

EXAMPLE

  function Page ({stars}) {
   return 
 Next stars: {stars} 
 }
 Page.getInitialProps = async (ctx) => {
   const res = await fetch ('https://api.github.com/repos/vercel/next.js')
   const json = await res.json ()
   return {stars: json.stargazers_count}
 }
 export default Page
 
 

Benefits

Same as getServerSideProps

How to decide which one to use?

When I use Next.js, I always try to make every page static. This means that I try to avoid using getServerSideProps and prefer getStaticProps. However if the data I get changes frequently I will of course use getServerSideProps. I never use getInitialProps anymore.

So I normally try getStaticProps and if that is causing the data to become stale then I move to getServerSideProps.

Source: https://nextjs.org/docs/basic-features/data-fetching