How to pass data fetched via server action in RSC (page.tsx) to a nested routed's RSC (page.tsx)?
Answered
Black Noddy posted this in #help-forum
Black NoddyOP
I have a route like this:
/route/[id]/layout.tsx which is typical
/route/[id]/page.tsx which is a server component and using server actions to query (with prisma) for data
I can prop drill the data, but the issue is:
/route/[id]/settings/page.tsx is another route, with a nested/child server component.
The key is that this child page.tsx is doing its own additional queries for data.
I need to take [id]/page.tsx data load and somehow make it available to [id]/settings/page.tsx, while it does its own thing and maintaining the "settings" route.
I know I can build a tabs component (e.g. radix) that can navigate and keep "settings" mounted and apply /settings, etc. but I just want to keep it simple. How do I address this?
/route/[id]/layout.tsx which is typical
/route/[id]/page.tsx which is a server component and using server actions to query (with prisma) for data
I can prop drill the data, but the issue is:
/route/[id]/settings/page.tsx is another route, with a nested/child server component.
The key is that this child page.tsx is doing its own additional queries for data.
I need to take [id]/page.tsx data load and somehow make it available to [id]/settings/page.tsx, while it does its own thing and maintaining the "settings" route.
I know I can build a tabs component (e.g. radix) that can navigate and keep "settings" mounted and apply /settings, etc. but I just want to keep it simple. How do I address this?
Answered by aardani
/route/[id]/layout.tsx which is typical
/route/[id]/page.tsx which is a server component and using server actions to query (with prisma) for data
If you call a function in the server component, then you are not using server action but just calling a normal function
Lets say the data you fetched in /[id]/page.tsx is called
A/route/[id]/settings/page.tsx is another route, with a nested/child server component.
If you want to get data
A, simply call the function again in this page. And dedupe the function.8 Replies
Black NoddyOP
p.s. context does not work in a server component, I can manuever around this with server context: https://github.com/vercel/next.js/discussions/53513#discussioncomment-6634165
But I feel there has to be an easier way.
But I feel there has to be an easier way.
Black NoddyOP
I've decided to:
1) run server action in layout.tsx instead of page.tsx ("data")
2) wrap the layout.tsx return statement with context
3) rather than prop drill down to /[id]/page.tsx and [id]/settings/page.tsx and their individual client components, I removed the props and just directly called on the context state as
still curious to hear of any other clever methods around route handling, RSC to RSC data sharing etc.
1) run server action in layout.tsx instead of page.tsx ("data")
2) wrap the layout.tsx return statement with context
<ExampleDataProvider data={data}>{children}</ExampleDataProvider>3) rather than prop drill down to /[id]/page.tsx and [id]/settings/page.tsx and their individual client components, I removed the props and just directly called on the context state as
const data = useExampleData();.still curious to hear of any other clever methods around route handling, RSC to RSC data sharing etc.
/route/[id]/layout.tsx which is typical
/route/[id]/page.tsx which is a server component and using server actions to query (with prisma) for data
If you call a function in the server component, then you are not using server action but just calling a normal function
Lets say the data you fetched in /[id]/page.tsx is called
A/route/[id]/settings/page.tsx is another route, with a nested/child server component.
If you want to get data
A, simply call the function again in this page. And dedupe the function.Answer
if the place where you neeeded the data was both in server component, then you can utilize
cache() from next/reactBlack NoddyOP
i don't know how i missed that, but you're right. i could use cache to leverage the same data
@Black Noddy i don't know how i missed that, but you're right. i could use cache to leverage the same data
Tbh its a new paradigm for most people. So dont worry about it too much, you came to the right place
Black NoddyOP
you are so nice. i love you.