Как я создал ToolHub: статичес... Заметка
DEV Community на русском

Как я создал ToolHub: статическое PWA из 138 инструментов, которое работает быстрее секунды

Автор недавно опубликовал подробный ретроспективный обзор архитектуры создания ToolHub — набора из 138 веб-утилит в браузере, ориентированных на чистоту, конфиденциальность и отсутствие лишнего кода. Сайт разработан так, чтобы загружаться менее чем за секунду и полностью работать в автономном режиме, с ключевыми инженерными компромиссами и техническими решениями, которые обеспечивают эти функции. Одним из основных архитектурных достижений является использование Next.js Static Export, которое позволяет полностью статически экспортировать модель, размещенную на CDN пограничного типа, что приводит к нулевому обслуживанию серверов и сверхнизкому времени до первого байта. Этот подход также обеспечивает бесконечную масштабируемость, но требует, чтобы весь динамический контент выполнялся строго на стороне клиента в памяти браузера. Автор также реализовал собственную стратегию кэширования Service Worker, которая включает stale-while-revalidate для статических ресурсов и network-first для навигации по HTML-документам, обеспечивая полную автономность всех инструментов после кэширования. Кроме того, автор разработал программный SEO-движок, который генерирует статические страницы инструментов с полными структурированными данными JSON-LD и автоматизированными сетями внутренних ссылок, все это встроено в статический HTML во время сборки. На сайте также реализована стратегия рекламы с нулевым CLS (Cumulative Layout Shift), которая предотвращает смещение макета, резервируя явные слоты фиксированной высоты для рекламных блоков до их загрузки. Автор предоставил сайт ToolHub для ознакомления пользователям, а также опубликовал подробный технический обзор в своем блоге, где делится более подробной информацией о технических решениях и компромиссах, которые были приняты при создании сайта. Автор ищет отзывы и предложения от пользователей и открыт для обсуждения архитектуры и идей для новых инструментов. В целом, проект ToolHub демонстрирует ряд инновационных технических подходов к созданию быстрых, автономных и ориентированных на конфиденциальность веб-приложений.