Do you use getStaticProps or getServerSideProps for ecommerce websites?

[funkon]

Summary

What's the most common approach when it comes to bulding ecommerce websites with NextJS? Let's say you have 1000 products: do you use getStaticPaths+getStaticProps or do you use getServerSideProps? (I give more info below as to how frequently the data is updated)

On one hand if you use getStaticProps and have lots of products, it will take a lot of time & compute power to rebuild the pages - But that doesn't happen if you use on-demand revalidation, right? As far as I understand, you have the ability to revalidate only the page data of the products that you've changed, so rebuilding the pages of all the products wouldn't be necessary, am I wrong here?

On the other hand: the common answer is "if they get updated frequently, use getServerSideProps" but in my case the only thing that maybe would be updated frequently in the product page is the stock/available sizes, so is worth it to use getServerSideProps (which has a higher strain on the server compared to getStaticProps) only because of one value? Would it be better to use getStaticProps and fetch-render the available sizes client-side?

The downside to this is that when google crawlers visit your website, they'll see a "loading available sizes" message or a loading spinner only for that specific small part of the product page for a second. But that's not a huge SEO penalty, right? And could you make it "less harmful" using React Query features?

Additional information

No response

Example

No response

[icyJoseph]

Just gonna throw in a few points that work altogether:

• You could use ISR, getStaticPaths with fallback: true, and that'll force you to implement the Fallback page by checking useRouter().isFallback for the pages that are not generated at build time
• Then you could generate, for example, 200 at build time, and then the fallback ISR takes care of generating the rest
  • For example, you could pre-generate the top 5% most visited pages/products
  • The rest can be generated by next/link prefetch as the users navigate around the shop
• Then the Stock, and other "live" data, could be loaded from the client side, for example using react-query or swr
• You could also set a revalidate time on the pages
• You could also implement on-demand revalidation to regenerate given pages
• Note that next/link does pre-fetch, which means that when it encounters GSP to pages not yet generated, it'll build them, and that might put runtime strain on the server -> this in turn prevents the fallback page from showing all too often