Зміст
Коротко
Автор зібрав puzzletoolbox.com — набір puzzle solver’ів на Next.js static export з обчисленнями в Web Workers. UI залишається плавним, поки фоновий потік перебирає мільйони варіантів. Bitboards, trie та евристики вкладають відповіді в <100 ms; хостинг обходиться в $0, бо CPU платить клієнт.
Що сталося
Завдання — швидкі солвери для Block Blast, Nonograms і Word Search без server-side compute. Next.js віддається як статичний export через CDN; уся важка робота йде в Web Worker, щоб main thread не блокував анімації, ввід і layout.
Для швидкості відмовилися від наївних 2D-масивів там, де це критично:
- Block Blast — стан дошки як bitboard (ціле число як бітова маска). Перевірка «чи влізає блок» і очищення ряду — операції AND/OR замість обходу сітки.
- 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.