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