Server and client components Nextjs 13
Answered
Cape lion posted this in #help-forum
Cape lionOP
Hey guys so im trying out the server and client components
I have a pokemon card which i want to make it a server component and the search component a client
but since the data im fetching is from a server component (the parent) how do i make the Card component a server component, and make the search button work in a server component?
what and how should i extract?
I have a pokemon card which i want to make it a server component and the search component a client
but since the data im fetching is from a server component (the parent) how do i make the Card component a server component, and make the search button work in a server component?
what and how should i extract?
Answered by fuma
Well, there are three ways I know:
1. Split it into
Create a
Hence, you can update the search context from the search input, and render cards conditionally according to what the user is searching.
When it's not matching, return
2. Use search URL parameters, like
Learn more: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
3. Keep it client component, server components are not supposed to re-render regularly.
Actually, it's just over-optimization. You should use client component for everything that will re-rendered regularly.
1. Split it into
CardsList (server component) and Card (client component) and render your card component conditionally.Create a
SearchContext and make the provider a client component.<SearchContextProvider>
<SearchInput />
...
<Card title="..." />
...
</<SearchContextProvider>Hence, you can update the search context from the search input, and render cards conditionally according to what the user is searching.
When it's not matching, return
<></> (empty fragment) from you Card component2. Use search URL parameters, like
page?query=search, you can receive searchParams from your page. which allows you to filter out the cards in server componentLearn more: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
This will opt-out of static rendering, the page will be rendered at request time
3. Keep it client component, server components are not supposed to re-render regularly.
Actually, it's just over-optimization. You should use client component for everything that will re-rendered regularly.
11 Replies
Can you explain more? So you want to pass an array of cards from the page, and render the cards while keeping them a server component?
CardPokemon is a client component, you can't import server components in a client component. The only possibility is to pass it as prop from a server componentCape lionOP
Sorry for my unclear explanation, what i meant was,
my page.tsx (parent) is a server component, and my CardPokemon is a client component im passing the data down as props, lets say for example my CardPokemon is a server component, how do I implement a search function without making the CardPokemon a client component?
my page.tsx (parent) is a server component, and my CardPokemon is a client component im passing the data down as props, lets say for example my CardPokemon is a server component, how do I implement a search function without making the CardPokemon a client component?
I can't see your second image/code.
But, This may help you get an idea on how to use search in Next 13: https://twitter.com/asidorenko_/status/1693992803641245899
But, This may help you get an idea on how to use search in Next 13: https://twitter.com/asidorenko_/status/1693992803641245899
What are you cooking fuma, typing from 7 mins
Well, there are three ways I know:
1. Split it into
Create a
Hence, you can update the search context from the search input, and render cards conditionally according to what the user is searching.
When it's not matching, return
2. Use search URL parameters, like
Learn more: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
3. Keep it client component, server components are not supposed to re-render regularly.
Actually, it's just over-optimization. You should use client component for everything that will re-rendered regularly.
1. Split it into
CardsList (server component) and Card (client component) and render your card component conditionally.Create a
SearchContext and make the provider a client component.<SearchContextProvider>
<SearchInput />
...
<Card title="..." />
...
</<SearchContextProvider>Hence, you can update the search context from the search input, and render cards conditionally according to what the user is searching.
When it's not matching, return
<></> (empty fragment) from you Card component2. Use search URL parameters, like
page?query=search, you can receive searchParams from your page. which allows you to filter out the cards in server componentLearn more: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
This will opt-out of static rendering, the page will be rendered at request time
3. Keep it client component, server components are not supposed to re-render regularly.
Actually, it's just over-optimization. You should use client component for everything that will re-rendered regularly.
Answer
@dumbboy I can't see your second image/code.
But, This may help you get an idea on how to use search in Next 13: https://twitter.com/asidorenko_/status/1693992803641245899
Cape lionOP
I see, okay ill try it out, i think this is the approach im looking for, thank you
@fuma Well, there are three ways I know:
1. Split it into `CardsList` (server component) and `Card` (client component) and render your card component conditionally.
Create a `SearchContext` and make the provider a client component.
tsx
<SearchContextProvider>
<SearchInput />
...
<Card title="..." />
...
</<SearchContextProvider>
Hence, you can update the search context from the search input, and render cards conditionally according to what the user is searching.
When it's not matching, return `<></>` (empty fragment) from you `Card` component
2. Use search URL parameters, like `page?query=search`, you can receive `searchParams` from your page. which allows you to filter out the cards in server component
Learn more: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
> This will opt-out of static rendering, the page will be rendered at request time
3. Keep it client component, server components are not supposed to re-render regularly.
Actually, it's just over-optimization. You should use client component for everything that will re-rendered regularly.
Cape lionOP
this is a similar approach to the one above but this is the answer im looking for, thank you both for answering my question
Once completed could you please mark the question as completed
Original message was deleted