Next.js Discord

Discord Forum

Generating static shell for dynamic route pages using Partial Prerendering

Answered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
I'm trying to setup partial prerendering on my project. It works really well with basic route such as /home but it doesn't seems to be generating a static shell for pages in dynamic route like /product/[productId]. My guess is that it needs something like generateStaticParams(), but I don't know my productId at build time (and the static shell should be the same for every product regardless).

So, is there now way to generate a static shell with partial prerendering on dynamic route ?
Answered by Eric Burel
searchParams will systematically trigger either dynamic or client-side rendering
View full answer

30 Replies

PPR should be for specific parts of your app. So for example a dynamic component. This component can be wrapped inside a suspense boundary and this boundary can hold a static shell
generateStaticParams is then for whole pages, but if you don't know the id, that's a little problematic..
@Ray you could try return an empty array in `generateStaticParams`
Brown bearOP
Thanks! Trying it right now. It doesn't seem to work, I might have something else making preventing the static generation, I'll mark your answer as the solution If I'm able to make it work 😉
or put it on the component under suspense
Brown bearOP
Yes, I do that already! I don't have any error, i just don't see any .html files for these pages in my build folder as I think we should be expecting right?
oh I just noticed that, even without generateStaticParams and it will still build the shell
because no params provided at build time
Brown bearOP
Hmm really? I'm not sure I see how that's supposed to work since the generated html should be hosted on a CDN as I understand. So we should be able (at least I would like to) to generate a static shell at build time even for dynamic route
after the first visit, it will be there and the cdn
or turn the dynamic param to searchParams
@Ray or turn the dynamic param to searchParams
Brown bearOP
Yeah thought about that too, but not a really pretty solution when having multiple nested dynamic segments...
for dynamic params, I think it need to be visited at least once to build the html
If you don't have actual statically generated params it's incremental, not exactly static
So I am not sure if you should expect a static shell here
You don't really need it either since the page will be rendered incrementally, so you have only one render per product ever
Static shell is not a layout, so even if add generateStaticParams, you will still have 1 render per product
What you need is most probably a layout here?
Ray answer is right, you are seeing the expected behaviour
So I suppose you may actually have another more precise issue bothering you here
Brown bearOP
Ok thanks for the detailed answer!
What's bothering me: let's say I have a page at /product/[productId], containing server components with Suspense that fetch data based on productId.
Using partial prerendering I was expecting to be able to generate a static page with the suspense fallback as html, and the dynamic content would be streamed in as the page load.
What I believe I'm seeing is that having a dynamic segment makes the page dynamic as well and as such not providing the expected faster loading experience.

I guess using SearchParams would do the trick, but let's say I have /category/[categoryId]/product/[productId], it makes more sense to me than /category/product?categoryId=XXXX&productId=XXXXX.

I may be missing something here, I'll continue my experiments 😉
Answer
that's really Next.js weak point, it can't correctly have static rendering based on searchParams unless you play around with complicated URL rewrites in middlewares to turn the search param into a route param
Maybe PPR is just not yet working for routes with dynamic params (not to be confused with dynamic rendering = per request SSR)