I’m Jen. Maybe you’ve seen me around the forum. Maybe we’ve even worked on your site’s form together!
We’re interested in hearing how our Forms feature is working for you. If you spend a few minutes filling out our smol survey, we’ll thank you by showering you with emojis and taking your feedback seriously We may even follow up with you for more information.
How to participate
First, fill out the poll in question 1. Note that you can only vote once, but you may change your vote if you accidentally choose the wrong option.
Then, copy/paste questions 2-4 into a comment and add your responses. If you’d prefer to share your feedback over DM, please note that in a comment or send me a message and I’ll get back to you. Without further ado:
How did you build your form?
static HTML, form submissions via AJAX
static HTML, form submissions not via AJAX
What do you use your form for?
Did you run into any issues building or submitting to your form?
If you ran into issues, how did you solve them? Did you write your own Netlify Function to process form submissions, integrate another form service into your site, or something else?
We look forward to your responses in the comments!
I’m not sure how all the Vue stuff works or if it supports a similar server-to-client-hydrate system, but if it does they’re going to be in the same boat.
@jen glad to be of help! For what it’s worth, I actually just got around to writing about this in depth. The mid section of this article kind of gets to the meat
But the whole premise is… difficult. These SSGs aren’t made to accommodate code changes between when the build exports out the static content and when the application actually runs in a browser. They expect the code to be the same on both sides. React’s docs talk about the hydrate() method here but a key note:
React expects that the rendered content is identical between the server and the client. It can patch up differences
And ultimately, Netlify injecting the hidden input in the static HTML and pulling the netlify or data-netlify="true" attributes off the <form> are both “differences” that React patches. And let me tell you; React patches. They’re very “this could happen” in the docs, but in all instances I’ve seen, React will patch things in the client tree within milliseconds of hydrating.
Their suggestion for when code needs to be different on the client vs. server is:
If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a state variable like this.state.isClient , which you can set to true in componentDidMount() . This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. Note that this approach will make your components slower because they have to render twice, so use it with caution.
Which is essentially exactly what that package I wrote does and that’s really the only way it works. Looking here:
I’m basically checking if we’re in the build time or runtime and if it’s build time, display the Netlify Forms tags. If it’s runtime, instead display a normal form and prepare to POST the form-name field manually because the hidden form-name input Netlify generates will get snipped by React when it hydrates