Client vs Server data fetching
Answered
Berger Picard posted this in #help-forum
Berger PicardOP
Hello, I have this component that holds two card components that share a state for setting the selected Project.
I'm currently using data fetching on the client-side through SWR but I'd prefer switching to server-sided fetching.
Is there an actual way to turn this into a server component? What would be an alternative to using a state in this case?
Thank you!
Take a look at the code: https://github.com/0xDEMXN/portfolio/blob/main/components/CardsWrapper.tsx
I'm currently using data fetching on the client-side through SWR but I'd prefer switching to server-sided fetching.
Is there an actual way to turn this into a server component? What would be an alternative to using a state in this case?
Thank you!
Take a look at the code: https://github.com/0xDEMXN/portfolio/blob/main/components/CardsWrapper.tsx
Answered by Berger Picard
7 Replies
New Guinea Singing Dog
yeah you could move the fetching into a server component
Then map over the data, rendering the client side <Card> component
Then map over the data, rendering the client side <Card> component
You won't be able to use state though because its a server component
so maybe something like
etc
etc
export async default function Cards() {
const data = useSWR('/api/projects', fetcher);
return (
{data?.map((project) =>
<Card card={project}>
)}
)
}@New Guinea Singing Dog so maybe something like
etc
typescript
export async default function Cards() {
const data = useSWR('/api/projects', fetcher);
return (
{data?.map((project) =>
<Card card={project}>
)}
)
}
Berger PicardOP
SWR is not available on the server, that's not the issue though.
I understand I could just turn this into a server component but I need to track what's the selected project to pass it to the ExtendedCard component as you can see in the code I shared so I would need an alternative way of doing this, I can't just get rid of state without replacing its logic with something else.
I understand I could just turn this into a server component but I need to track what's the selected project to pass it to the ExtendedCard component as you can see in the code I shared so I would need an alternative way of doing this, I can't just get rid of state without replacing its logic with something else.
New Guinea Singing Dog
Could just have another client component that is inbetween the server component that holds all the card components, where the extended card can be?
Like another layer?
Like another layer?
Berger PicardOP
Yeah maybe I could try moving the data fetching upper one level and pass the data to the CardsWrapper that hold the state management, thank you! 🙂
Answer