Please, help me make Partial Pre-Rendering (PPR) working
Unanswered
ZegiE posted this in #help-forum
ZegiEOP
I'm trying to implement Partial Pre-Rendering (PPR) on the main page, which receives a Promise Search Params, passes these Search Params to a dynamic component, and that component then awaits the search parameters and fetch & render restaurants based on the query.
However, when I build the app, the page is builded as dynamic, with F icon , and I can't get it to work as partial pre-rendering, where some parts are rendered statically and others dynamically.
How can I achieve this? Please, help me, i have lost like 5 hours trying to get it working but 0..
However, when I build the app, the page is builded as dynamic, with F icon , and I can't get it to work as partial pre-rendering, where some parts are rendered statically and others dynamically.
How can I achieve this? Please, help me, i have lost like 5 hours trying to get it working but 0..
17 Replies
Well if you need to have access to searchParams that automatically turns your page dynamic, that’s because searchParams are only ever available at request-time. Meaning you need the client to send a request with the searchParams. When you page receives them they’re coming from the request made dynamically from browser, otherwise how could your static page guess the searchParams it needs to use?
If what you want is your page.tsx to catch the searchParams and pass it down to both <DynamicRestaurants> and <RestaurantFilters/> then your page.tsx needs to be dynamically rendered in order to be able to catch the searchParams values.
Also, if <RestaurantFilters/> and <DynamicRestaurants> can be client component, you could use the hook useSearchParams() and do the fetching from the client.
Also, if <RestaurantFilters/> and <DynamicRestaurants> can be client component, you could use the hook useSearchParams() and do the fetching from the client.
@LuisLl Well if you need to have access to searchParams that automatically turns your page dynamic, that’s because searchParams are only ever available at request-time. Meaning you need the client to send a request with the searchParams. When you page receives them they’re coming from the request made dynamically from browser, otherwise how could your static page guess the searchParams it needs to use?
ZegiEOP
Thanks for the clarification!
If searchParams make the page dynamic, how can I still follow the Parallel Data Fetching pattern to fetch data efficiently?
What alternative approach would you suggest for fetching data in these components if I make them client components? And what would be the SEO implications in this case?
how can i still fetch data server side, if i do DynamicRestaurants client component?
would appreciate your insights and recomendations for my case, (its only for learning purposes project, not commercial)!
If searchParams make the page dynamic, how can I still follow the Parallel Data Fetching pattern to fetch data efficiently?
What alternative approach would you suggest for fetching data in these components if I make them client components? And what would be the SEO implications in this case?
how can i still fetch data server side, if i do DynamicRestaurants client component?
would appreciate your insights and recomendations for my case, (its only for learning purposes project, not commercial)!
I would suggest you leave the “/“to render dynamically and instead prevent your data fetching functions to be triggered on every request by wrapping them on
If making your “/“ page dynamic is a deal breaker for you the only viable solution would be to use Client Side data fetching while keeping the “/“ route static.
ustable_cache (which is actually pretty stable). If making your “/“ page dynamic is a deal breaker for you the only viable solution would be to use Client Side data fetching while keeping the “/“ route static.
ZegiEOP
function getRestaurants is wrapped in cache() from react. and in fetch has a tag and revalidation times set. Right now, i have this (screenshot), with passing promise to component where i get data with use()
cache from react will only de-duplicate requests across the same render pass. Let’s say: if you call the function in layout.tsx, then again in page.tsx in generateMetafata() and again in the Server Component body
ZegiEOP
Okey.. and another variant if i will do PPR is convert to client components and retrieve with usesearchparams yes?
Yea but you’ll need to fetch data from the client, which is probably not what you want
@LuisLl Yea but you’ll need to fetch data from the client, which is probably not what you want
ZegiEOP
yeah.. i want fetch data on the server, and thi is the problem. I dont know how to retrieve searchparams without making the entire page dynamic, and fetch data on server side.
It’s just not possible, if you get searchParams via props you’re automatically turning that page dynamic, that’s how it works. Even if you do not await searchParams in the page itself.
Same happens if you call cookies() or headers() even if you don’t await them.
By the mere fact of making use of those dynamic APIs you’re opting out of static rendering, because you’re requesting request-time data
By the mere fact of making use of those dynamic APIs you’re opting out of static rendering, because you’re requesting request-time data
@ZegiE solved?
@LuisLl <@294431578413596673> solved?
ZegiEOP
Yes. I got working the page in PPR mode, with search params and server side fetching :). The problem was a Header component which was in Layout, and had a button with button that uses a User function with coockies, so i wrapped it in a Suspense and ready.