Dynamic routes and partial pre-rendering (PPR)

[valleywood]

I'm migrating a large solution from Page router to App router and was exited about the PPR functionality.
We're having a dynamic slug for our products (there are thousands of them) like this products/[slug]

The idea was to have product information (that doesn't change that often and are not user group specific etc) to be rendered server side so that it is included in the initial document file sent to the browser. Then things like price and product recommendations could be streamed with Suspense to the client dynamically.

To make the routes dynamic i added a generateStaticParams function like this in my products/[slug]/page.tsx file

export async function generateStaticParams() {
  return [];
}

This works fine as long as i wrap both my components inside a Suspense like this:

"use cache";
...
<Suspense>
        <ProductData params={params} />
</Suspense>
<Suspense>
        <RelatedProducts params={params} />
</Suspense>
...

This however makes both ProductData and RelatedProducts being streamed to the client leading to a worse user experience and decreased LCP values etc.

What I would like is this:

"use cache";
...
<ProductData params={params} />
<Suspense>
        <RelatedProducts params={params} />
</Suspense>
...

This would actually make the ProductData appear in the initial document and RelatedProducts being streamed just as i wanted.
However this setup causes console errors in the browser:

Server  Error: Route "/products/[slug]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense
    at ProductPage [Server] (<anonymous>:1:29)
    at resolveErrorDev (react-server-dom-webpack-client.browser.development.js:2856:1)
    at getOutlinedModel (react-server-dom-webpack-client.browser.development.js:2215:1)
    at parseModelString (react-server-dom-webpack-client.browser.development.js:2411:1)
    at Object.eval (react-server-dom-webpack-client.browser.development.js:4085:1)
    at JSON.parse (<anonymous>)
    at initializeModelChunk (react-server-dom-webpack-client.browser.development.js:1720:1)
    at getOutlinedModel (react-server-dom-webpack-client.browser.development.js:2150:1)
    at parseModelString (react-server-dom-webpack-client.browser.development.js:2507:1)
    at Array.eval (react-server-dom-webpack-client.browser.development.js:4085:1)
    at JSON.parse (<anonymous>)
    at initializeModelChunk (react-server-dom-webpack-client.browser.development.js:1720:1)
    at resolveConsoleEntry (react-server-dom-webpack-client.browser.development.js:3146:1)
    at processFullStringRow (react-server-dom-webpack-client.browser.development.js:3936:1)
    at processFullBinaryRow (react-server-dom-webpack-client.browser.development.js:3837:1)
    at processBinaryChunk (react-server-dom-webpack-client.browser.development.js:4058:1)
    at progress (react-server-dom-webpack-client.browser.development.js:4326:1)

I've tried with the code below and then it works as expected with no console error and the product information being rendered in the initial document but that isn't a feasible solution having thousands of products that is updated/added/deleted continuously

export async function generateStaticParams() {
  // Return ALL possible slugs at build time
  return KNOWN_PRODUCTS.map(slug => ({ slug }));
}

Is this a known limitation of PPR and should I go for a ISR + client setup instead or does anyone know of a way to have dynamic routes (with slugs) working with PPR?