Search code examples
javascriptvue.jsusabilityserver-side-rendering

How does Vue server side rendering performs in time-consuming computations?

I'm currently developing a website for a large company who sells goods. They have and extensive catalogue with a lot of searching options and filters, which - at the moment - require some time to compute and render (approx. 1-2s). I cannot speed up further this process since I need to check each and every filter, and return the right result.

So, when I click a checkbox to apply a filtering option, the website freezes (Performance tab in chrome dev tools shows me that the JS engine is pretty busy). I'm afraid that the potential user would keep on clicking repeatedly - instead of patiently waiting - while the engine is busy, resultin in a frustrating wait ending with a check-uncheck and no filtering applied. I also tried to wrap the time-consuming operations in a new Promise, but still it wouldn't respond and, in the end, freezes the browser in the same way.

So I have to ask two questions:

  • Is there a way to inhibit further user input while Vue is computing the results (and, maybe, applying a "loading" screen? My attempts in doing so, by putting specific instructions at the beginning of the method/computed and before the actual function body, weren't successful)
  • If I used server side rendering with Vue, how would it behave? Would it still freeze for that 1 second, waiting for server payload, or would it be comparable to a Promise function?

I don't really know If I clarified the problem, (I hope my english is correct, even though not technically correct maybe, since I'm 🇮🇹), if there are some informations that I omitted I can happily remedy.

Solution

  • My suggestions would be to move this complex logic into a client-side worker script that makes the requests and any filtering. Second as a UI/UX level would be to add a "Working..." overlay with some form of animation that indicates that work is being done.

    As to doing this work server-side... If you do server-side rendering via Node, that does complex blocking calculations that will inhibit ALL users unless you inject some form of worker pool or RPC fronting worker queue. It's possible but the answers and options are more complex and beyond scope for this site.

    As mentioned above, a worker with some animation is probably the best way to go here.