Performance degradation (super slow TTFB) with long select option list

[ThinkingAbout]

Hi,
using "long" (252 items) option lists in select causes severe slowdowns in server-side rendering of the page (from ~50ms to ~2s).
In our case (on the production website, it took a couple of months to detect the source of the problem) the issue was not only concerning a slowdown on the page itself for the single user navigating it, but it caused a noticeable slowdowns throughout the website, for all users connected subsequently (maybe some server-side/node.js issue was triggered causing CPU or memory issue).

In summary:

• Our site runs fast (TTFB ~200ms for each page);
• Some users access the contact page (SSR) including the vue-formulate form and the country select;
• From that moment, the website becomes slow on all pages using SSR, for all users (~2s TTF on each page);
• We need to restart PM2 to reset the performance issue;
• After the restart of pm2 the site goes back to being fast at initial values but the cycle repeats itself when some user go to the contacts page again (every certain time we need a restart of PM2);

We only found the issue at the SSR level, wrapping every <form></form> in a <client-only></client-only> tag solved the problem.

Reproduction

Is this a known problem and are there any solutions to avoid it?

Regards,
Matteo

[justin-schroeder]

Very interesting — although I don’t really know what would cause this server side. Do you get similar results with a standard Vue 2 select list?

[ThinkingAbout]

Yes, in the reproduction provided I added a classic form (now commented, just try to switch the comments, maybe outside stackblitz) and it's super fast (~50ms vs ~2s TTFB).
Thanks!