Is there any way to handle displaying errors to the client in NextJS server components?
Answered
Order posted this in #help-forum
OrderOP
I know that there's been a lot of let's say.. promoting of how easy it is to implement nextjs server side rendered pages with server actions etc and yes it is true that it's extremely easy to make a form and just make the form action directly call a server action and just have server side validation on the form. What I don't understand is how do I render the errors back to the user inside a server component form. In a client component it's extremely easy to use something like react hook form and just dynamically render the errors back to the user under the fields, but how would I go about doing that in a server component? And if (as I suspect) it can't be done doesn't that kinda invalidate the use of server components in a lot of cases?
Answered by joulev
form action > form onSubmit because:
* actions are automatically transitions, you don't have to
* you have access to the native react hook
* it works with js disabled (progressive enhancement)
* actions are automatically transitions, you don't have to
startTransition it* you have access to the native react hook
useFormStatus instead of having to implement it yourself or use third party libraries* it works with js disabled (progressive enhancement)
10 Replies
OrderOP
again, this works for client components, you can not use hooks in server components
and it's largely the same as using reacthookforms only utilizes the default react tools
that's correct yes
displaying error means client-side interactivity, i don't see how it is possible with purely server components
of course you can always
redirect("/form-page?error=Foobar") and use searchParams to get the error query and render the error banner, i wouldn't consider that good UXOrderOP
it's possible if the server returns html I guess which is clearly a completely different approach from what next is using and what react in general stands for. The reason why I was asking is because in the nextjs docs there are examples of using the form action to directly call the server action but I never understood how that would be useful in any way considering that you're unable to send the error states back to the client in the form of html
So instead most people call the server action in the onsubmit of the form and the form becomes a client component
@Order So instead most people call the server action in the onsubmit of the form and the form becomes a client component
form action > form onSubmit because:
* actions are automatically transitions, you don't have to
* you have access to the native react hook
* it works with js disabled (progressive enhancement)
* actions are automatically transitions, you don't have to
startTransition it* you have access to the native react hook
useFormStatus instead of having to implement it yourself or use third party libraries* it works with js disabled (progressive enhancement)
Answer
OrderOP
I see, ok I get how it works now thanks.