Help me understand this Next.js behavior

[fkoessler]

Hello,

I am implementing an e-commerce application based on Vercel commerce GitHub - vercel/commerce: Next.js Commerce, with a Spree backend instead of Shopify.

Unlike Vercel commerce, I would like the product pages to use Incremental Static Regeneration (ISR) for improved performances. (Vercel commerce has dynamic product pages)

So I implemented the generateStaticParams function in my product page:

export const dynamicParams = true
export const revalidate = false

export async function generateStaticParams() {
return []
}

type ProductProps = {
params: {
slug: string
}
}

const getProductWithRedirect = async (slug: string) => {
try {
return product = await getProduct(slug)
} catch (error: any) {
notFound()
}
}

export default async function Product({ params: { slug } }: ProductProps) {
const product = await getProductWithRedirect(slug)
if (!product || typeof product == 'string') notFound()

return
}

generateStaticParams returns an empty array: we have to many products to build all the pages at build time, I want the pages to be built on demand and then saved into the cache (ISR).

With this implementation, product pages raise a 500 error:

Page changed from static to dynamic at runtime /product/example-slug, reason: cookies

Note: I am indeed reading from cookies in the main layout to retrieve the current cart.

Now if I update generateStaticParams to return at least one slug, the error disappears from the page built at build time, but also from all other product pages that are built at request time and stored into the cache (ISR)

export async function generateStaticParams() {
return ['a-single-product-slug']
} 

So this actually fixes my problem!
However, since I have no idea what is going on, I wonder if this is safe and won’t break in a future Next.js update.
Can anyone explain to me what is happening?

[amyegan]

I’m glad your project is working, @fkoessler! The Next.js folks have shared some details about how generateStaticParams() works, and I don’t want to take credit for their work. Please give these links a read through and let me if you need any more info.

From Can anyone explain how generateStaticParams() works along with the param object in next 13? · vercel/next.js · Discussion #44641 · GitHub

It is very similar to getStaticPaths , so generateStaticParams has to return every path member that’s dynamic.

From Functions: generateStaticParams | Next.js

generateStaticParams should return an array of objects where each object represents the populated dynamic segments of a single route.

• Each property in the object is a dynamic segment to be filled in for the route.
• The properties name is the segment’s name, and the properties value is what that segment should be filled in with.