Please, help me make Partial Pre-Rendering (PPR) working

[molten ridge]

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..

[wary steeple]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[molten ridge]

export const experimental_ppr = true on the page is set

[marsh helm]

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.

[molten ridge]

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)!

[marsh helm]

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 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.

[molten ridge]

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()

[marsh helm]

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

[molten ridge]

Okey.. and another variant if i will do PPR is convert to client components and retrieve with usesearchparams yes?

[marsh helm]

Yea but you’ll need to fetch data from the client, which is probably not what you want

[molten ridge]

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.

[marsh helm]

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

[marsh helm]

@molten ridge solved?

[molten ridge]

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.