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

Question

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

因此，当我单击复选框以应用过滤选项时，网站会冻结（Chrome 开发工具中的“性能”选项卡显示 JS 引擎非常繁忙）。我担心潜在用户会在引擎忙碌时继续反复点击 - 而不是耐心等待 - 导致令人沮丧的等待以检查取消检查和未应用过滤结束。我还尝试将耗时的操作封装在 new Promise 中，但它仍然没有响应，最后以同样的方式冻结了浏览器。

所以我要问两个问题：

• 有没有办法在 Vue 计算结果时禁止进一步的用户输入（并且，也许，应用“加载”屏幕？我这样做的尝试，通过在方法/计算的开头和之前放置特定指令实际的函数体，没有成功）
• 如果我在 Vue 中使用 服务器端渲染，它会表现如何？它是否仍会冻结 1 秒，等待服务器有效负载，还是可以与 Promise 函数相媲美？

我真的不知道如果我澄清了问题，（我希望我的英语是正确的，即使技术上可能不正确，因为我是????????） ，如果我遗漏了一些信息，我可以很高兴地补救。

Answer 1

我的建议是将这个复杂的逻辑移动到一个客户端工作脚本中，该脚本会发出请求和任何过滤。其次，作为 UI/UX 级别，将添加一个“正在工作...”叠加层，并带有某种形式的动画，表明工作正在完成。

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

如上所述，带有一些动画的工人可能是最好的方式。