Содержание
Коротко
Автор собрал puzzletoolbox.com — набор puzzle solver’ов на Next.js static export с вычислениями в Web Workers. UI остаётся плавным, пока фоновый поток перебирает миллионы вариантов. Bitboards, trie и эвристики укладывают ответы в <100 ms; хостинг обходится в $0, потому что CPU платит клиент.
Что произошло
Задача — быстрые солверы для Block Blast, Nonograms и Word Search без серверного compute. Next.js отдаётся как статический export через CDN; вся тяжёлая работа уходит в Web Worker, чтобы main thread не блокировал анимации, ввод и layout.
Для скорости отказались от наивных 2D-массивов там, где это критично:
- Block Blast — состояние доски как bitboard (целое число как битовая маска). Проверка «влезает ли блок» и очистка ряда — операции AND/OR за нанoseconds вместо обхода сетки.
- Nonograms — constraint satisfaction с line-solving heuristics (пересечения, spacing) до fallback на DFS; search space сжимается экспоненциально.
- Word Search — Trie (prefix tree): при сканировании сетки в 8 направлениях путь отбрасывается, если текущая последовательность не является валидным префиксом словаря.
Итог — live-инструмент на https://puzzletoolbox.com, где latency определяется алгоритмами на устройстве пользователя, а не round-trip к API.
Почему это важно
Паттерн «100% compute на клиенте» меняет экономику side project и интерактивных утилит:
- Нет server bill за CPU — только CDN за статику.
- Масштаб по пользователям не требует autoscaling backend.
- Web Workers — стандартный способ не жертвовать UX при тяжёлой логике в браузере.
Урок не в «всё в JS», а в выборе структур данных под домен: bitboards для grid-головоломок, trie для prefix search, эвристики до полного перебора. Raw array manipulation на миллионах пермутаций не уложится в интерактивный бюджет.
Static export Next.js здесь — осознанный tradeoff: нет SSR/API routes на проде, зато глобальный CDN и предсказуемые расходы.
На практике
Если строите похожий browser-based solver или симулятор:
- Вынесите перебор в Worker с чётким протоколом сообщений (board state in, best move out).
- Для grid-задач оцените bitboard — часто даёт порядок ускорения без WASM.
- Для словарного поиска стройте Trie один раз при загрузке, не linear scan по словам.
- Деплойте как static export + CDN; профилируйте на слабых мобильных, не только на M-series Mac.
Синхронизация state между Worker и React требует аккуратности — но для read-heavy solver’ов это проще, чем optimistic UI в multiplayer.
Итог
Client-side puzzle suite на Next.js и Web Workers — кейс, где алгоритмы и изоляция потоков важнее backend-стека. Bitboards и trie держат latency низкой, а static hosting — бесплатным. Имеет смысл читать оригинал, если проектируете интерактивные утилиты без server compute.