Calling server action in page then passing down the prop for the client components
Answered
MarkMiklos posted this in #help-forum
I have the page.tsx which is a server component, that gets the data "user", then I have 3 client component which uses the user data and handles user data changes such as name change or password change.
Is this a good way to call the server action then pass and then pass it down to the client component and then revalidate the tag in the fetch as shown in the pictures, or is there a more professional way to do this?
It feels like the page is a little slower, but not sure if thats the case.
Is this a good way to call the server action then pass and then pass it down to the client component and then revalidate the tag in the fetch as shown in the pictures, or is there a more professional way to do this?
It feels like the page is a little slower, but not sure if thats the case.
Answered by Nile Crocodile
yeah the initial load might be slower since the page is waiting for the promise to resolve before it renders. in hindsight it would've taken a client component the same time but the difference is that you show something like a spinner in a client component while loading, making you feel that the page is loading faster.
You can also do the same thing with server components, just use loading.tsx that will display something while the actual page is loading
You can also do the same thing with server components, just use loading.tsx that will display something while the actual page is loading
7 Replies
🆙
Brown bear
Yes, it is how server actions are meant to be used.
Nile Crocodile
yeah the initial load might be slower since the page is waiting for the promise to resolve before it renders. in hindsight it would've taken a client component the same time but the difference is that you show something like a spinner in a client component while loading, making you feel that the page is loading faster.
You can also do the same thing with server components, just use loading.tsx that will display something while the actual page is loading
You can also do the same thing with server components, just use loading.tsx that will display something while the actual page is loading
Answer
Thanks for the answers, I am thinking about using react-query for the client components for mutation and stop using the revalidateTag in my fetches, is that a good approach, or just go with this solution that i posted originally?
Nile Crocodile
that's pretty much what i do
saves a lot of time and still gives me the ability to control the cache on the client side
That convinced me, thanks 🙂