When you get started with NextJS, especially when it comes to loading items from data or somewhere else, you'll start to come across functions like getStaticProps, getServerProps and then sometimes getStaticPaths.
It'll probably not be that massively clear as to what they do or, more importantly, which ones you should be using and when.
Luckily, there are some easy ways to decide which ones you should be using
getStaticProps and getServerSideProps
These are the two that you'll be using the most. If you need them at all.
They are used for fetching data in NextJS. It is within these functions that you'll do any data fetching, and possibly processing, before passing on what is required to your page.
Choosing between them
You'll want to use getStaticProps for most of your pages to leverage static generation for speed when data does not change on every request. This way it can be run once at build time.
Use getServerSideProps that require real-time data or cannot be prerendered at build time.
Examples
So one example for getStaticProps would be fetching a page header image path from a headless CMS. The header isn't going to change and I want that page prebuilt and rendered to make that page quicker.
An example of getServerProps would be a user admin page that could update often with stats or data. I don't want to rerender that. I'll want it to refresh the data every time the user requests that page.
getStaticProps
This function's purpose is to fetch data at build time. So you'll use it when the data required to render the page is available at build time and does not change often.
One benefit is that pages are served statically from a CDN which makes them incredibly fast.
A suitable use case would be a blog homepage where blog posts are fetched from Sanity at build time.
getServerSideProps
You'll want to use this function to fetch data on each request. So you'll want it when the data changes frequently, or the page must display personalised or real-time data.
The benefit of using this is always up-to-date data but with a potential cost to performance due to no static caching.
A suitable use case would be a user dashboard where that page changes for each user logged in.
When should I use getStaticPaths then?
So you might think that most of your data fetching can be covered by the two functions mentioned above.
But let's say we are building a blog, and we have decided we want to paginate our home page that lists all the blog posts we have.
We are going to paginate by 10 blog posts per page, and we'll use the URL to decide which page of that pagination we are on.
Because we are using the URL to work out which page we are on, this is classed as us using Dynamic Data which isn't available at build time using the above two functions.
Using getStaticPaths you can pre-generate all possible pagination pages and then use that in combination with getStaticProps to create
This will do the request to find out how many pages they'll be by querying the database for how many posts there are. We then create a path for each page with the page number passed as a data param.
This data param can then be accessed from the getStaticProps function and will build all of these pages.
The above will then use the pageNum param passed into it by the getStaticPaths and use this to query the database and get the required information. It'll divide it by 10, and then multiply by the current page number and get the overview information that it needs to display on the main pages.
It'll pass these posts to the actual page function rendering everything, along with the total pages and the page number.
Conclusion
Once you understand the basic usage of each function, you can then easily decide which one is best suited for your needs.
I try to lean more towards getStaticProps because it'll provide most of the information at build time and provide the pages to the user faster.
I'll use getStaticPaths as a middle ground when I can't do everything in getStaticProps but I have everything I need at build time and I want to avoid constant data fetching for data that doesn't change often.
By combining effective caching strategies, utilizing pre-fetching capabilities, and choosing the right data fetching method based on your content update frequency and user experience requirements, you can significantly enhance the performance and responsiveness of your Next.js application.