The problem with forms
A form contains interactive elements, such as inputs and buttons. If you handle the form with Vue.js, and you use either PR or SSR, you can loose the values that user put in the prerender fields like this :
I start typing and then I loose everything : focus, values, and so on. Let’s see why.
For our example, we will use:
- A single html file containing the prerendered form
- A Vue.js component containing the form that will be mounted on top of the prerendered form
Note: I have intentionally changed the prerender form title so we can see when the component is mounted. It is supposed to be the same with PR and SSR.
A smoother transition
What we want for our users is to have a transparent transition between the prerendered form and the new form.
We can use the Vue.js component hooks to solve this problem. When the hook created is triggered, you still have the prerendered form in the DOM, and you have access to your component data. This is when you want to retrieve the previous value and inject it in your component data.
Let’s see what it looks like:
Better. But we still loose the focus. To fix this, we are going to retrieve the user focus in the created hook, but we will only be able to put the focus on new input when the component is mounted, since the new input does not exist in the DOM when the created hook is triggered.
And here is the result:
Now the focus and the previous values are still there when the component is mounted.
The final solution is available, you can try it on a slow connection using chrome dev tools network tab.