Как выполняется рендеринг на стороне сервера Vue в длительных вычислениях?

Question

В настоящее время я разрабатываю сайт для крупной компании, которая продает товары. У них есть обширный каталог с множеством параметров поиска и фильтров, которые - на данный момент - требуют некоторого времени для вычисления и рендеринга (около 1-2 с). Я не могу ускорить этот процесс, так как мне нужно проверить каждый фильтр и вернуть правильный результат.

Поэтому, когда я нажимаю флажок, чтобы применить параметр фильтрации, веб-сайт зависает (вкладка "Быстродействие" в инструментах Chrome Dev показывает, что движок JS довольно загружен). Я боюсь, что потенциальный пользователь будет продолжать нажимать несколько раз - вместо того, чтобы терпеливо ждать - пока двигатель занят, что приводит к разочаровывающему ожиданию, заканчивающемуся галочкой-галочкой и без применения фильтрации. Я также попытался обернуть трудоемкие операции в new Promise, но все равно он не отвечает и, в конце концов, блокирует браузер таким же образом.

Поэтому я должен задать два вопроса:

• Есть ли способ запретить дальнейший пользовательский ввод, пока Vue вычисляет результаты (и, может быть, применяет экран "загрузки"? Мои попытки сделать это, помещая конкретные инструкции в начале метода / вычисляется и перед фактической функцией тело, не удалось)
• Если бы я использовал рендеринг на стороне сервера с Vue, как бы он себя вел? Будет ли он все еще зависать в течение этой 1 секунды, ожидая загрузки сервера, или будет сравним с Promise функционировать?

Я действительно не знаю, если я прояснил проблему, (я надеюсь, что мой английский правильный, хотя, возможно, не технически правильный, так как я), если есть некоторая информация, которую я пропустил, я могу с радостью исправить.

Answer 1

Я бы предложил перенести эту сложную логику в рабочий сценарий на стороне клиента, который выполняет запросы и любую фильтрацию. Во-вторых, в качестве уровня UI/UX следует добавить наложение "Working..." с некоторой формой анимации, которая указывает на то, что работа выполняется.

Что касается выполнения этой работы на стороне сервера... Если вы выполняете рендеринг на стороне сервера через Node, это делает сложные вычисления блокировки, которые будут препятствовать ВСЕМ пользователям, если вы не внедрите какую-либо форму рабочего пула или рабочую очередь RPC. Это возможно, но ответы и варианты более сложны и выходят за рамки этого сайта.

Как упомянуто выше, рабочий с некоторой анимацией, вероятно, лучший способ пойти сюда.