How can I pass props from client component to server component rendered inside client component
Answered
Pacific thread herring posted this in #help-forum
Pacific thread herringOP
To try to say shortly, I dont want to use 'searchParams' on my page props because that way page becomes dynamic. But I need to pass those searchParams from url to child component, which I want to be server component.
The only way is to have Client component wrapper around child server component, and this client wrapper can extract searchparams from url with useSearchParams from 'next/navigate'. Is there a way to render nested server component statically and later, when Clientwrapper renders on client side, pass filters from CLientwrapper useSearchParams to that same nested server component.
Something like this:
The only way is to have Client component wrapper around child server component, and this client wrapper can extract searchparams from url with useSearchParams from 'next/navigate'. Is there a way to render nested server component statically and later, when Clientwrapper renders on client side, pass filters from CLientwrapper useSearchParams to that same nested server component.
Something like this:
<ParentPage> // imports ServerChild
<ClientWrapper>
<ServercChild
filterProps
={defaults to ""} />
</ClientWrapper>
</ParentPage>
<ClientWrapper> // uses 'useSearchParams' to extract filter from url
{children} // need to pass filter here somehow
</ClientWrapper>
<ServerChild> // gets filter props, which initially is "" (empty string)
</ServerChild>Answered by B33fb0n3
exactly: you can't. When it's a static page, then it's static: the same for all users.
You can change the page, based on the user input, but then everything happens in client components (and not in server component). Of course you can still use server actions or route handlers
You can change the page, based on the user input, but then everything happens in client components (and not in server component). Of course you can still use server actions or route handlers
7 Replies
@Pacific thread herring To try to say shortly, I dont want to use 'searchParams' on my page props because that way page becomes dynamic. But I need to pass those searchParams from url to child component, which I want to be server component.
The only way is to have Client component wrapper around child server component, and this client wrapper can extract searchparams from url with useSearchParams from 'next/navigate'. Is there a way to render nested server component statically and later, when Clientwrapper renders on client side, pass filters from CLientwrapper useSearchParams to that same nested server component.
Something like this:
<ParentPage> // imports ServerChild
<ClientWrapper>
<ServercChild
filterProps
={defaults to ""} />
</ClientWrapper>
</ParentPage>
<ClientWrapper> // uses 'useSearchParams' to extract filter from url
{children} // need to pass filter here somehow
</ClientWrapper>
<ServerChild> // gets filter props, which initially is "" (empty string)
</ServerChild>
you can do that by using searchParams or dynamic routes inside your url. It's editable & readable by both: server & client
@B33fb0n3 you can do that by using searchParams or dynamic routes inside your url. It's editable & readable by both: server & client
Pacific thread herringOP
Yes, and I want this page to be prerendered,not dynamic. Because it does fetch request and i want to make that request on server. So i'm trying to avoid using searchParams (dynamic routes)
@Pacific thread herring Yes, and I want this page to be prerendered,not dynamic. Because it does fetch request and i want to make that request on server. So i'm trying to avoid using searchParams (dynamic routes)
but your client should still be able to "change" the requests on your server, with his input? And the route should still be static?
@B33fb0n3 but your client should still be able to "change" the requests on your server, with his input? And the route should still be static?
Pacific thread herringOP
Ah you mean... if component is server component, only server-side filtering is possible? But after client-side is rendered, can I re-render server-component based on client-side props? I guess I can not..
@Pacific thread herring Ah you mean... if component is server component, only server-side filtering is possible? But after client-side is rendered, can I re-render server-component based on client-side props? I guess I can not..
exactly: you can't. When it's a static page, then it's static: the same for all users.
You can change the page, based on the user input, but then everything happens in client components (and not in server component). Of course you can still use server actions or route handlers
You can change the page, based on the user input, but then everything happens in client components (and not in server component). Of course you can still use server actions or route handlers
Answer
@B33fb0n3 exactly: you can't. When it's a static page, then it's static: the same for all users.
You can change the page, based on the user input, but then everything happens in client components (and not in server component). Of course you can still use server actions or route handlers
Pacific thread herringOP
I think i just found missing piece in server-client relationship puzzle. Thank you for explaining (not sure how to mark this thread as 'solved' or what other rules apply, sorry)