How We Built a Zero-Server-Cost CAD Directory with Next.js SSG & SQLite

#nextjs #performance #react #webdev

The Economics of Niche Vertical Directories

Most SaaS directories and comparison engines follow a familiar architecture:

Next.js / Remix frontend
Hosted PostgreSQL database (Supabase, Neon, AWS RDS)
Redis cache layer
ElasticSearch or MeiliSearch cluster for filtering

While this stack works well for user-generated content platforms, it introduces significant operational overhead for curated, read-only vertical knowledge hubs: monthly cloud bills, connection pool exhaustion, migration pipelines, and server cold starts.

When we set out to build CADGuide.tools — a comprehensive technical comparison directory and interactive calculator suite for CAD/CAM software (AutoCAD, BricsCAD, ZWCAD, FreeCAD, Rhino, SolidWorks) — our core engineering requirement was simple:

Achieve true $0 monthly server costs and sub-50ms Global Time-to-First-Byte (TTFB) while serving thousands of deeply indexed static comparison pages.

Here is the architectural pattern we developed using Next.js Static Site Generation (SSG) powered by a build-time SQLite database.

The Build-Time SQLite Pattern

Instead of querying a remote database at runtime or loading thousands of lines of raw JSON into memory during Next.js bundling, we store our curated tool taxonomy, feature flags, licensing models, and technical matrices in a local SQLite database (wikihub.db).

During next build, Next.js executes generateStaticParams() directly against the local SQLite database via better-sqlite3:

// app/guides/[slug]/page.tsx
import Database from 'better-sqlite3';
import path from 'path';

// Open read-only SQLite handle during static compilation
const dbPath = path.join(process.cwd(), 'data', 'wikihub.db');

export async function generateStaticParams() {
  const db = new Database(dbPath, { readonly: true });

  // Fast query over indexed slug table
  const articles = db.prepare(`
    SELECT slug 
    FROM articles 
    WHERE status = 'published'
  `).all() as { slug: string }[];

  db.close();

  return articles.map(item => ({
    slug: item.slug
  }));
}

export default async function GuidePage({ params }: { params: { slug: string } }) {
  const db = new Database(dbPath, { readonly: true });

  const article = db.prepare(`
    SELECT title, content_markdown, software_slug, meta_description 
    FROM articles 
    WHERE slug = ?
  `).get(params.slug);

  db.close();

  return (
    <article className="prose prose-invert max-w-4xl mx-auto py-12">
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: renderMarkdown(article.content_markdown) }} />
    </article>
  );
}

Why Build-Time SQLite Beats JSON & Remote DBs

Relational Constraints for Complex Filtering: CAD software selection involves complex multi-dimensional criteria (e.g., "Does GstarCAD support LISP 32-bit pointers and network floating dongles?"). Relational SQL joins allow us to validate compatibility logic and feature matrices cleanly before generating HTML.
Zero Runtime Latency: Because the entire site compiles to flat static HTML + edge-cached JSON props, the runtime has zero database queries. Pages are served instantly from Cloudflare / Vercel Edge CDN nodes.
Impenetrable Security: With no running backend database, SQL injection, database credential theft, or DDoS attacks targeting API endpoints are architecturally impossible.

Interactive Client-Side Calculators Without Hydration Bloat

In addition to static guides, CADGuide features specialized mechanical utilities like the Sheet Metal K-Factor Calculator and the DWG Version Checker.

To keep bundle size minuscule:

Zero Heavy Math Libraries: All trigonometric and bend deduction formulas are written in raw TypeScript without external dependencies.
Client-Side Binary Streaming: File parsing reads binary headers directly from the browser's Blob API, avoiding any server-side upload endpoints.

Results & Takeaways

By pairing build-time SQLite compilation with Next.js static generation:

Hosting Cost: $0/month on Vercel Hobby / Cloudflare Pages.
Lighthouse Performance Score: 98-100 across Mobile and Desktop.
Maintenance: Zero database backups to schedule, zero database connection pool limits.

Check out the live directory at CADGuide.tools or browse our technical guides at CADGuide.tools Guides.

DEV Community