How To Choose Data Fetching Strategies In NextJS

Explained with real-world examples

Photo by Brendan Church on Unsplash

NextJS is a framework that we React developers love and admire. It’s high in demand and very, very powerful.

But when you start to learn this you will see that ReactJS and NextJS mainly differ in the capability of pre-rendering. Which can be a little tricky to grasp at first.

There are multiple strategies for us to choose and it gets confusing at first to apply the correct solution in the correct place. We will take a real-life application and understand which strategy works best for which scenarios.

Let's get started.

The Functions

I hope you already have a basic understanding of NextJS. If not, I would suggest you read this article first.

The special functions that are used for pre-rendering in NextJS(but not present in ReactJS) are:

• getStaticProps
• getStaticPaths
• getServerSideProps

We will see in which scenarios you can apply these functions and also learn the best practices.

We Are Talking About an Ecommerce Website

The biggest disadvantage of using React is that it’s a bit hard to make it SEO-friendly. But for an ecommerce website, that’s one of the major things that you need.

So let’s assume we are building an ecommerce website that has multiple pages. Let’s start designing this.

Products Page (Predictable)

The home page of our ecommerce website is the products page where you can see a list of products. Obviously, you already know which products to show. There can be multiple strategies like:

• Getting popular products
• Getting featured products
• Getting discounted products

Whatever the case, the main thing is you already know which API you need to call and that API is not changing or depending on some other info. In these scenarios only getStaticProps is enough.