Почему выбор пал на Astro?
Недавно я запустил проект blueprintcalc.com, который включает 12 онлайн-калькуляторов для домашнего ремонта (краска, бетон, гипсокартон, плитка и др.). Эти инструменты не только рассчитывают необходимое количество материалов, но и формируют полный список покупок со ссылками на магазины.
Ранее я всегда использовал Next.js для статических сайтов, однако на этот раз решил попробовать Astro. И вот почему:
Основные требования проекта
Перед выбором фреймворка я четко сформулировал задачи сайта:
- Основная аудитория приходит через поисковые системы (Google).
- Ключевое значение имеет оптимизация под SEO и высокие показатели Lighthouse (минимум 95 баллов на мобильных устройствах).
- Калькуляторы должны быть интерактивными, мгновенно обновляя результаты при изменении входных данных.
- Нет необходимости в серверной части, базе данных или аутентификации пользователей.
- Все вычисления выполняются локально, исключительно математические операции над числовыми данными.
- Сайт должен быть доступен бесплатно на платформе Cloudflare до тех пор, пока трафик остается небольшим.
Обратите внимание, что здесь нет требований к динамическим функциям реального времени, персонализированному контенту или сложным маршрутам.
Недостатки использования Next.js
Хотя Next.js отлично подходит для приложений с авторизацией и динамическими данными, он оказался избыточным решением для моего проекта по следующим причинам:
- Размер бандла: даже простой сайт на Next.js содержит библиотеку React, сам фреймворк и дополнительные компоненты, увеличивая размер страницы примерно до 80 КБ минимизированного кода.
- Глобальная гидратация: Next.js загружает весь DOM дерева при загрузке страницы, включая элементы, которые не требуют взаимодействия (например, FAQ или формулы расчетов), что приводит к ненужным затратам ресурсов браузера.
Таким образом, использование Next.js было бы неоправданно тяжелым решением для такого типа контента.