Calling server action in page then passing down the prop for the client components

[dusky sparrow]

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.

[green hound]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[dusky sparrow]

🆙

[real jacinth]

Yes, it is how server actions are meant to be used.

[neat vigil]

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

[dusky sparrow]

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?

[neat vigil]

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

[dusky sparrow]

That convinced me, thanks 🙂