How can I fetch data on server side in client component?
Answered
Acorn Woodpecker posted this in #help-forum
Acorn WoodpeckerOP
I have a
I have tried using server actions but got following error:
After some googling I found out that
Header.tsx client component in layout.tsx and I want to fetch listing API in header component but on the server but I can't fetch data in layout and pass it to header component because data can be stale.I have tried using server actions but got following error:
Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.After some googling I found out that
server actions can only used with interactions and not to fetch data. What should I do now?5 Replies
@Acorn Woodpecker I have a `Header.tsx` client component in `layout.tsx` and I want to fetch listing API in header component but on the server but I can't fetch data in layout and pass it to header component because data can be stale.
I have tried using server actions but got following error:
Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
After some googling I found out that `server actions` can only used with interactions and not to fetch data. What should I do now?
turn the
Header.tsx to server component and make the children to client component and pass the data to it@Ray turn the `Header.tsx` to server component and make the children to client component and pass the data to it
Acorn WoodpeckerOP
I can do that but I'm using context API in
Header.tsx component, so I have to create a new component and move whole code to that component. something like following:|-Header.tsx (server)
|-ClientHeader.tsx@Acorn Woodpecker I can do that but I'm using context API in `Header.tsx` component, so I have to create a new component and move whole code to that component. something like following:
|-Header.tsx (server)
|-ClientHeader.tsx
yes you have to create the client component in other file
Answer
Acorn WoodpeckerOP
so I have to only create a component for listing.