Generating static shell for dynamic route pages using Partial Prerendering
Answered
Brown bear posted this in #help-forum
Brown bearOP
I'm trying to setup partial prerendering on my project. It works really well with basic route such as
So, is there now way to generate a static shell with partial prerendering on dynamic route ?
/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
30 Replies
@Brown bear 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 ?
you could try return an empty array in
generateStaticParamsPPR 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 😉
@Brown bear 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 😉
what error you got? sometime I need to put a
unstable_noStore in the componentor 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?
@Brown bear Yeah thought about that too, but not a really pretty solution when having multiple nested dynamic segments...
Why though? Not sure I see the link with nesting
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
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
I may be missing something here, I'll continue my experiments 😉
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 😉
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)