Is it appropriate to call a safe action client from a Server Component?

[palmmymumu]

I’m trying to load some data on the page.tsx (e.g. getUserById action) and pass user data as props to a EditUserDialog component, which is a Client Component. The idea is to use the fetched data to populate the default values in a form.

Now, if I just await getUserById in the page.tsx, everything works fine. But I wanted to wrap the EditUserDialog in a block and pass a action promise instead — then use the use() function inside EditUserDialog to unwrap the promise.

However, that causes an error because my action function calls next/headers for authorize check, and Next.js doesn’t allow using next/headers inside Client Components.

So I’m wondering: am I using this wrong? Should I just stick with the simpler approach — await the data on the server, then pass it down as props — instead of trying to use use() in the Client Component?