Optimize product page route shell

[unstubbable]

stacked on #1454

Due to the product pages using the ProductProvider, which uses useSearchParams, the product route shells are currently pretty much empty. This PR attempts to sketch out how we could push the useSearchParams further down, and use it more granularly, so that skeletons can be used as suspense fallbacks wherever product selections can be made that influence the search params. Thus allowing us to statically prerender most of the product details into the route shell. The selection elements then become interactive on hydration. There's still some minor CLS that should be fixed, but it's a start.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
commerce-shopify	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 15, 2025 1:13pm

[unstubbable]

I fell into a trap here. Because of the absence of generateStaticParams, Next.js is considering this route as high-cardinality, and will always use the fallback shell for all routes. It won't produce route shells on-demand when visiting the product pages with specific params. What tripped me up was that with next start we currently do generate those route shells. That needs to be fixed in Next.js.

However, this approach is still valid if we decide to use generateStaticParams to prerender all or some product pages (e.g. for the most popular products).