data fetching app router
Unanswered
White-horned horntail posted this in #help-forum
White-horned horntailOP
I am really frustrated with data fetching nextjs app router. I cant create an async function and use hooks in the same component as in pages router. Any guide on how i can separate these concerns? The data I am fetching depends on {params}, available only on the current loaded page.
7 Replies
Can you share your code for more context?
White-horned horntailOP
Hello, i found a work around. I created a page.js an async function to fetch data(still had access to dynamic route params), then made my client component(that uses hooks) a child component and passed data fetched as props.
Thanks
Thanks
Earlier, My frustration was that when I add "use client" to this component, i lose async capability, if i remove it, i lose hooks capability
Oh yes this is because
RSC(React Server Components) can be async components and the RSC dont use this like useState, useEffect or any hook because these are characteristics of the client componentsalso you can use a Route Handlers for get data in client side
https://nextjs.org/docs/app/building-your-application/routing/route-handlers
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-route-handlers
https://nextjs.org/docs/app/building-your-application/routing/route-handlers
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-route-handlers
@nahuelluca also you can use a Route Handlers for get data in client side
https://nextjs.org/docs/app/building-your-application/routing/route-handlers
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-route-handlers
White-horned horntailOP
Thanks. I'm thoroughly reviewing the docs.