Can I render a Server component inside a client component?
Answered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
Exactly what title says
Answered by joulev
still no idea what the app is like, but you cannot import a server comp inside a client comp.
the only way client-side states can drive server components is by server-readable data such as search params or cookies.
you can do the search client-side as well if you like.
the only way client-side states can drive server components is by server-readable data such as search params or cookies.
you can do the search client-side as well if you like.
8 Replies
@African Slender-snouted Crocodile Exactly what title says
as a children, yes. imported inside the client component, no.
African Slender-snouted CrocodileOP
@joulev Then how can I handle the following scenario ?
I'm fetching from 6 collections ( firebase ) on server at start, that I display them in different tabs, and each tab has its own searchBar, how can I individually search in each tab without calling an entire re-fetch on all 6 collections again?
I'm fetching from 6 collections ( firebase ) on server at start, that I display them in different tabs, and each tab has its own searchBar, how can I individually search in each tab without calling an entire re-fetch on all 6 collections again?
@African Slender-snouted Crocodile <@484037068239142956> Then how can I handle the following scenario ?
I'm fetching from 6 collections ( firebase ) on server at start, that I display them in different tabs, and each tab has its own searchBar, how can I individually search in each tab without calling an entire re-fetch on all 6 collections again?
each tab is one page, fetch one collection per page, use [search params](https://nextjs-faq.com/sharing-client-side-state-with-server-components) to search within each tab
African Slender-snouted CrocodileOP
I can't create one page for each tab, because the app goes like this:
U select a template_type and based on this template_type, I have to fetch between 3 and 6 collections from firebase ( those collections contains videos ), then for each collection I will have a "Add video" button that will pop a Modal so the user can select what videos he wants from that collection and he can search through those videos inside the Modal
U select a template_type and based on this template_type, I have to fetch between 3 and 6 collections from firebase ( those collections contains videos ), then for each collection I will have a "Add video" button that will pop a Modal so the user can select what videos he wants from that collection and he can search through those videos inside the Modal
@joulev
@African Slender-snouted Crocodile I can't create one page for each tab, because the app goes like this:
U select a template_type and based on this template_type, I have to fetch between 3 and 6 collections from firebase ( those collections contains videos ), then for each collection I will have a "Add video" button that will pop a Modal so the user can select what videos he wants from that collection and he can search through those videos inside the Modal
still no idea what the app is like, but you cannot import a server comp inside a client comp.
the only way client-side states can drive server components is by server-readable data such as search params or cookies.
you can do the search client-side as well if you like.
the only way client-side states can drive server components is by server-readable data such as search params or cookies.
you can do the search client-side as well if you like.
Answer
African Slender-snouted CrocodileOP
🤔 Okey, I will think about a way of doing it, thank you very much!