Vue服务器端渲染如何在耗时的计算中执行？

Question

我目前正在为一家销售商品的大公司开发一个网站。他们拥有广泛的目录，其中包含许多搜索选项和过滤器，目前需要一些时间来进行计算和渲染（大约1-2秒）。由于需要检查每个过滤器并返回正确的结果，因此无法进一步加快此过程。

因此，当我单击复选框以应用过滤选项时，网站将冻结（chrome开发工具中的“性能”标签显示JS引擎非常繁忙）。恐怕潜在用户会在引擎忙碌时继续反复单击-而不是耐心等待-导致令人沮丧的等待，最后是未选中和未应用过滤。我还尝试将耗时的操作包装在new Promise中，但仍然无法响应，最后以相同方式冻结浏览器。

所以我不得不问两个问题：

• 在Vue正在计算结果时（是否可以应用“正在加载”屏幕？），是否有一种方法可以禁止用户输入更多信息？我尝试这样做的方法是，在方法/计算的开始处以及之前添加特定的指令实际的功能主体没有成功）
• 如果我将服务器端渲染与Vue一起使用，它的表现如何？它会仍然冻结1秒，等待服务器有效负载，还是可以与Promise函数相提并论？

我真的不知道，如果我弄清楚了这个问题，（我希望我的英语是正确的，尽管从技术上讲可能不是正确的，因为我是），如果我有一些信息省略，我可以很高兴地进行补救。

Answer 1

我的建议是将这种复杂的逻辑转移到进行请求和任何过滤的客户端工作程序脚本中。其次，要在UI / UX级别上添加“正在使用...”叠加层，并以某种形式的动画表示正在完成工作。

关于在服务器端执行此工作...如果您通过Node执行服务器端渲染，则将执行复杂的阻塞计算，除非您注入某种形式的工作池或RPC前端工作队列，否则该计算将禁止所有用户。可能，但是答案和选项更加复杂，超出了本网站的范围。

如上所述，有动画的工人可能是去这里的最佳方式。