Case Study: Engineering a High-Performance, Edge-Native Waitlist

Live URL: waitlist
Stack: Astro, React, Cloudflare D1, Drizzle ORM, TypeScript

The Objective

The goal was to build a waitlist application that prioritizes user experience through extreme performance. In an era where a 1-second delay can drop conversion rates by 7%, I aimed to build a system with near-zero latency, perfect Lighthouse scores, and a globally distributed database.

The Architectural Shift: Why This Stack?

1. Astro vs. Next.js: Efficiency Over Hype

While Next.js is a common choice, it carries the overhead of a mandatory React runtime on the client side. For a landing page and waitlist, this is unnecessary bloat.

• Astro’s Islands Architecture: I utilized Astro to ship zero JavaScript by default. React was only hydrated for the interactive form component. This reduced the total bundle size to a mere ~15kb.
• Superior TTFB: By deploying on Cloudflare’s edge, I achieved faster Time-To-First-Byte (TTFB) than traditional Next.js deployments on centralized providers.

2. Eliminating the Backend Bottleneck (Express vs. Astro SSR)

Traditional architectures often use a separate Express.js server. I opted for Astro SSR (Server-Side Rendering) to create a unified, full-stack environment.

• Unified Logic: API routes and frontend logic live in a single codebase, eliminating CORS issues and reducing deployment complexity.
• Edge Workers: The entire backend runs on Cloudflare Workers, benefiting from an massive global network with no “cold starts.”

3. Data at the Edge: Cloudflare D1 & Drizzle ORM

Database latency is usually the biggest performance killer. I solved this by moving the data to the user.

• Cloudflare D1: Unlike a central PostgreSQL instance in a single region, D1 is a serverless SQL database that integrates natively with the edge runtime.
• Drizzle ORM: I chose Drizzle over Prisma because it is a “thin” wrapper. It lacks the heavy Rust-based engine of Prisma, making it significantly faster and more compatible with the restricted environment of Edge Workers.

Type Safety Across the Wire

Using TypeScript was non-negotiable. By sharing types between my Drizzle schema and my React components, I created an “End-to-End Type Safety” loop. If a database column name changes, the frontend build fails immediately, ensuring 100% runtime reliability.

Performance Results

Lessons Learned

This project proved that you don’t need heavy, complex frameworks to build powerful applications. By choosing “boring” SQL at the edge and a lightweight “Islands” architecture, I built a product that is faster, cheaper to run, and easier to maintain than a traditional MERN or Next.js stack.

Developed by Saiful Alom — Visit Portfolio