How can I fetch server data in client component using App Router?

Question

I have a page.tsx that has 'use client' due to need of useState in various components, but with 'use client' I can't create async functions therefore I can't fetch data from server-side like I used to do in Pages Router using getServerSideProps() ... So my question is how can I fetch data like I used to do in Pages Router?

Siricid woodwasp · Answer

You could always make a client component that contains all the other client components. This way, you wouldn't have to make your page use client. That would probably be the recommended way to go about it and what I do when I have multiple components dependent on the same state. Alternatively I guess you could have an API route that returns the data you need.

How can I fetch server data in client component using App Router?

2 Replies