How I Built ToolHub: A 138-Tool Static PWA That Stays Sub-Second

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! 💬