server side mail send
Unanswered
Sweat bee posted this in #help-forum
Sweat beeOP
hey folks, I have a tricky question: I have a nextjs app that gets forms from contentful. I fetch the data in a form wrapper and pass the form fields to a client sided form component. Important here is to keep the recipients on the server side. So I added a submitHandler to the client component props:
In the server component I have an async 'use server' submitForm function which receives the formData and sends it to to the recipients. I pass the submitForm fct to the client component. On submit I pass back the formData and if its succesful I redirect to a successPage (also set in contentful). That works fine but still I am getting a warning that the submitHandler function is not serializable. Probably because I pass it from a server component?! Is that very bad and if so how can I fix my dilemma? I know I can use server actions inside client components directly but then I need to pass the recipients to the client, too which then are exposed in public (I dont want that)!
submitHandler: (data: FormData) => Promise<{ success: boolean; redirectTo?: string | undefined }>;In the server component I have an async 'use server' submitForm function which receives the formData and sends it to to the recipients. I pass the submitForm fct to the client component. On submit I pass back the formData and if its succesful I redirect to a successPage (also set in contentful). That works fine but still I am getting a warning that the submitHandler function is not serializable. Probably because I pass it from a server component?! Is that very bad and if so how can I fix my dilemma? I know I can use server actions inside client components directly but then I need to pass the recipients to the client, too which then are exposed in public (I dont want that)!
4 Replies
Why do you think you need to pass the recipients to the client? From your explanation the recipients are only live within the Server Action, correct me if I'm wrong.
Sounds like what you need to do is created a separate file named whatever you want
You can read more about this from the [documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
actions is the current favorite among the community, and define the "use server" directive at the top of the file and writing and exporting your server action in that file, and consuming that in your client component via the action property (unless you have a specific use case for onSubmit).You can read more about this from the [documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
Sweat beeOP
the server action doesnt know about the recipients... I fetch the recipient inside the server component along with the formfields (coming from contentful). Then I only pass the formfields to the form component on the client side. The server action is not part of the server component. Its in its own file, so then I have to pass the formData and the recipient to the server action, which means I need the recipient on the client or not?!
Yes it would mean you need the recipient on the client, however, you could instead fetch the recipient again within the Server Action.