Server Side Form
Unanswered
Norwegian Forest Cat posted this in #help-forum
Norwegian Forest CatOP
Hello. My site is very SEO heavy, so I would like to create a page with a form that is server side rendered.
For submission I use server actions. Once the form is submitted I want to display a success/error message. I tried to make use of the useFormState hook, but that requires client component.
I also tried to create a form wrapper that is client side and handles the useFormState hook. This wrapper is client side however it will get server side component through props. The problem is that the client wrapper obtains form state from server action but that state is not transferred to server side form.
Is it somehow possible to show submission state while preserving the form server side?
TLDR:
I want to somehow use the useFormState hook while preserving the form rendered on a server side.
For submission I use server actions. Once the form is submitted I want to display a success/error message. I tried to make use of the useFormState hook, but that requires client component.
I also tried to create a form wrapper that is client side and handles the useFormState hook. This wrapper is client side however it will get server side component through props. The problem is that the client wrapper obtains form state from server action but that state is not transferred to server side form.
Is it somehow possible to show submission state while preserving the form server side?
TLDR:
I want to somehow use the useFormState hook while preserving the form rendered on a server side.
11 Replies
Chum salmon
I don't think you need the form to be server-side because useState is crucial to make a form works. What matters is the content you display after the form is submitted. That is important for SEO and you can do it serverside.
The form itself has fields and buttons, why do you need SEO for the form?
The form itself has fields and buttons, why do you need SEO for the form?
@Chum salmon I don't think you need the form to be server-side because useState is crucial to make a form works. What matters is the content you display after the form is submitted. That is important for SEO and you can do it serverside.
The form itself has fields and buttons, why do you need SEO for the form?
Norwegian Forest CatOP
I want the form to get indexed in Google. It's crucial for my business. Can you please elaborate why the result of submission is more important? After submission I just want to display the form with success message below.
@James4u <@692635975678951464> take a look at this library.
https://next-safe-action.dev/
Norwegian Forest CatOP
Yeah, this might be also useful, but I don't get how this help with interactivity and the problem I described. Could you please explain?
Make a fake form, thats static with no state, and then import a client component over it.
Only thing I can think of
@Norwegian Forest Cat I want the form to get indexed in Google. It's crucial for my business. Can you please elaborate why the result of submission is more important? After submission I just want to display the form with success message below.
Chum salmon
by the way, what is your form about? If you really want SEO in it, you can make that part server-side for the info you need for SEO, then make the form separately (client-side) and import it.
For example, make a page or component server-side and include all the SEO you want, then import the form (client component) to that page.
For example, make a page or component server-side and include all the SEO you want, then import the form (client component) to that page.
@Chum salmon by the way, what is your form about? If you really want SEO in it, you can make that part server-side for the info you need for SEO, then make the form separately (client-side) and import it.
For example, make a page or component server-side and include all the SEO you want, then import the form (client component) to that page.
Norwegian Forest CatOP
That page basically contains only that form. I don't want to make it client side.
@Jboncz Make a fake form, thats static with no state, and then import a client component over it.
Norwegian Forest CatOP
Hmm. I think that crawlers may be clever enough to find this out.
Of course it would lol. I have used this method in the past.
crawlers are looking at the raw html. You can inline style the 'fake' form to just be hidden, and it would work fine.