Hi everyone! 👋 I recently published a full architecture retrospective on building ToolHub — a clean, privacy-first, zero-bloat suite of 138+ in-browser web utilities.
Here is a summary of the key engineering tradeoffs and technical decisions that allowed us to keep the site sub-second fast and fully offline-capable.
🚀 Key Architectural Highlights
⚡ 1. Next.js Static Export (output: 'export')
Instead of running a node server for SSR/ISR, we opted for a 100% static export model hosted on edge CDN.
👉 Why: Zero server maintenance, ultra-low TTFB, infinite scaling.
👉 Tradeoff: Everything dynamic executes strictly on the client side in browser memory.
📲 2. Custom Service Worker Caching Strategy
We built a custom SW strategy specifically for PWA caching:
stale-while-revalidate for static assets (_next/static/*).
network-first for HTML document navigations (ensures users always see the latest release when online).
Complete offline capability across all 138 tools once cached.
🔍 3. pSEO Engine (Programmatic SEO)
Generating 138+ static tool pages with full JSON-LD structured data and automated internal linking meshes, all baked into static HTML at build time without runtime database lookups.
📐 4. Zero-CLS Ad Strategy
Preventing layout shifts (CLS) by reserving explicit fixed-height layout slots for ad units before they load.
🛠️ Try ToolHub Live:
👉 https://toolhub.axtrivc.com/
📖 Read the full engineering deep-dive on my blog:
👉 https://toolhub.axtrivc.com/blog/how-i-built-toolhub/
I'd love to hear your thoughts, feedback on the architecture, or suggestions for new tools! 💬
Top comments (0)