Меньше запросов к серверу, умный каталог и коварные баги Vue 3

Что сделано

За последние две недели удалось хорошо продвинуть проект: оптимизировал расчеты, доработал каталог материалов и исправил несколько неприятных ошибок.

Оптимизировал расчет сметы. Раньше при изменении площади стены или толщины слоя браузер отправлял запрос на сервер, где расчет выполнялся через PHP. Теперь простые вычисления происходят прямо в браузере на TypeScript. Результат обновляется мгновенно, а сервер получает меньше лишних запросов.
Собрал единый каталог материалов. Перенес данные по строительным материалам из СП в общую базу проекта. Теперь характеристики материалов используются во всех калькуляторах из одного источника. Заодно заменил хрупкие числовые ID на понятные строковые коды (code) и добавил отдельный класс для поиска материалов, обработки синонимов и получения расчетных параметров.
Исправил логику точки росы. Калькулятор больше не показывает предупреждение о конденсате для полов по грунту. Для таких конструкций отключаются график и статус влагонакопления, но параметры слоев по-прежнему участвуют в расчете сопротивления теплопередаче.
Починил «летающие трубы» в теплом полу. На небольших экранах трубы иногда визуально отрывались от слоя утеплителя. Причиной оказалась рассинхронизация масштабирования SVG. Теперь схема корректно отображается и на смартфонах.
Доработал мобильную версию и подключил аналитику. Исправил наложение блоков меню при прокрутке на телефонах и глобально подключил Яндекс.Метрику с поддержкой SSR.

Что на стройке

Последние две недели основное время забирали заказы на основной работе, поэтому стройка немного замедлилась.

Зато накопились обновления KIB4D. В ближайшее время хочу вернуться к кладке внутренних перегородок и начать подготовку к заливке пола.

Лето в этом году выдалось дождливым и пасмурным. Когда солнца мало, работать бывает тяжелее, но движение продолжается.

Что узнал

Nuxt 4 и Vue 3 продолжают учить меня внимательности.

Сначала поймал классическую ловушку реактивности. В скрипте значения реактивных переменных приходится получать через .value, а внутри <template> Vue распаковывает их автоматически.

Одно лишнее .value в разметке — и график начинает работать неправильно.

Еще столкнулся с ошибкой гидратации (Hydration mismatch).

При генерации страницы сервер не имеет доступа к localStorage, поэтому сначала видит ноль сохраненных конструкций. После загрузки браузер получает сохраненные данные, и HTML на клиенте перестает совпадать с HTML, который создал сервер.

Проблема решилась довольно просто: счетчик конструкций обернул в компонент <ClientOnly>.

Впрочем PHP при этом никуда не исчезает. Я работаю с ним еще со времен PHP 3 и по-прежнему использую там, где действительно нужна серверная логика.

На данном этапе перенос простых расчетов на клиентскую сторону оказался более подходящим решением. Не нужно каждый раз отправлять данные на сервер, если результат можно мгновенно получить прямо в браузере.

Что дальше

Выложить обновление на боевой сервер и обновить базу материалов.
Начать подготовку архитектуры для расширенных отчетов и почасовой климатической симуляции за год.
Вернуться к строительству и продолжить кладку перегородок.

Продолжаю.