NextJS getServerSideProps

Question

Question about getServerSideProps

What exactly does getServerSideProps do and what are some examples of when I need to use this?

What is getStaticProps and what is different from getServerSideProps?

Also, when I run “next export” with getServerSideProps, why does it spit an error and getStaticProps doesn't?

Answer 1

The main difference between getServerSideProps and getStaticProps is that getServerSideProps will run on every request on the page that is using it as it's data fetching method. This is useful when you need the freshest data possible. On page's first load, this function will pre-render the page on the server and return certain props to the component. Then, React will rehydrate on the client using the data sent by getServerSideProps .

Once on the client side (page's first load already happened), getServerSideProps will also run on client's side navigation to that page, sending the data as JSON to the client.

Now, getStaticProps is different, as it will only pre-render the page at build time, making it useful for building pages with content that doesn't update very often, for example a "Blog" site.

And there's also this concept called ISR or Incremental Static Regeneration which is kind of a hybrid between server-side rendering and static-site generation. You can read more here