CODEWITHSUNDEEP
next.js
Kernel James
Kernel James

Reputation: 4064

Should all fetching be done inside getStaticProps in NextJS?

In NextJS in order to utilize static site generation, I need to perform all network requests inside getStaticProps.

I've removed all the fetch calls in my React app and moved them inside getStaticProps, but how do I deal with requests to show data sorted/filtered by a criteria? The data is too long to be sorted client side.

Do I need to add another path (with getStaticPaths) to represent the new sorted permutation?

e.g. example.com/products/?sort=asc&sort_by=price

And then read them inside getStaticProps as parameters and then fetch the data?

Won't this generate too many permutations? But otherwise how do I pass the sort parameter to getStaticProps for the querying?

How about filtering by price range? This would be an infinite number of permutations. And how do I put these infinite permutations inside getStaticPaths?

Upvotes: 0

Views: 1121

Answers (2)

Gabe
Gabe

Reputation: 6875

I think this line is causing you to have some confusion:

In NextJS in order to utilize static site generation, I need to perform all network requests inside getStaticProps.

This is not quite true. Next.js still uses static site generation even if you have network requests inside of your code. But getStaticProps is for data that won't be changing, such as blog posts and generating pages based of those blog items. In your example I'm assuming your trying to use getStaticProps for you /products URL which is not a good use case because getStaticProps only runs when you build the application, not every time someone queries it.

So then I would use getServerSideProps which uses server side rendering, or I would just fetch the data inside of your React code. I would say based off of your issues listed above that you should just fetch the data inside of your React code. Next.js will still render a static html page for this, just the base state would have your loading indicator, and then once your products are fetched based off of your criteria then it would display your products.

For more information on fetching data with Next.js I would look here.

Upvotes: 1

Danila
Danila

Reputation: 18506

You can't pass query params to getStaticProps so this whole idea won't work anyway. But if theoretically you could then yes, you would need to make all the permutations manually which is not very feasible.

So if you want to have server-side render on those pages then you need to use getServerSideProps, it is your only option if you are using query params.

Other solution would be to render core of the page statically (with getStaticProps) but load the data on the client.

Upvotes: 0

Related Questions