What is the recommended way to serve documents from Firestore in a Next.js app?

[adapan-bak]

Hey,

I'm building an ecommerce like website using Next.js and Firebase, however I have a question for someone with more experience in Next.js, as I'm just starting out.

When serving a product (ie: product details page) should I:

1. Grab all the products from the database using a Firestore snapshot, store all of them inside React Context (or Redux store) and finally serve the product via a find/filter

...
const { products } = useContext(FirebaseContext)
const productDetails = products.find(product => product.slug === name)
...

2. Use /pages/api/products/[name].js and individually grab the product details on page level (/pages/products/[name].js) using getStaticProps with fallback: true?

What is the best practice for this use case? Or is there a better way to do it? I'm mainly concerned about SEO and speed of course.

Many thanks!

[leerob]

Are you deploying with Vercel? If so, I'd recommend using getStaticPaths / getStaticProps in combination with Incremental Static Regeneration. Here's how this would work:

1. You'd have a product page like /pages/products/[name].js. getStaticPaths would fetch all the product IDs or names to generate all of the routes. getStaticProps would fetch the single product snapshot from Firestore.
2. Using fallback: true and unstable_revalidate, you can periodically regenerate the static pages, ensuring there's zero downtime for your products (very important for e-commerce).

This will be the best approach for SEO and performance.

[adapan-bak]

Sure, I'm happy to go with Vercel. I'm flexible since it's really more like a side project, in order to learn more about next.js (hopefully). That being said, thanks a lot for your detailed answer, this makes a lot more sense now - really appreciate the help!