Case Study: Why I Chose Astro Over Next.js for a Zero-Ad SaaS Utility
When you look at the dominant online file conversion tools today, the user experience is thoroughly broken. Most legacy platforms trap you in a cycle of flashing banner ads, slow server queues, and predatory subscription pop-ups just because you want to combine a couple of screenshots into a single document.
Even worse, they require you to upload your personal files — tax documents, ID scans, or company designs — to a remote cloud server to process the conversion.
When I sat down under HandanCorp to build my first SaaS website, I wanted to change this paradigm entirely. I wanted to achieve two primary engineering metrics:
- Absolute, Zero-Server Privacy: 100% client-side compilation. Your images should never hit a backend server; they must be processed locally inside the browser sandbox using JavaScript.
- Sub-Second Speed Metrics: An instant, ultra-lightweight web interface with zero hydration lag, earning a flawless 100/100 score on Google PageSpeed Insights.
To achieve this level of performance, the biggest architectural decision came down to the framework: Next.js or Astro?
Here is the factual breakdown of why I walked away from Next.js, why Astro was the ideal fit for this utility model, and how we structured the application to optimize for user retention.
The Tech Stack Showdown: Next.js vs. Astro for Micro-Utilities
For the past several years, Next.js has been the default choice for building modern SaaS products. It is an incredible framework for complex, authentication-heavy ecosystems, authenticated data dashboards, and full-stack software applications.
But for a single-page asset utility tool that I was targeting, Next.js introduces a massive layer of framework bloat.
1. The Hydration Tax (The JavaScript Overhead Problem)
Next.js fundamentally treats every webpage as a Single Page Application (SPA) shell. Even if your initial landing page layout looks static, Next.js forces the client browser to download, parse, and execute the full React runtime bundle alongside your custom component assets. This process is called hydration.
For a user who searches Google for a conversion tool, they want to interact with the file upload drop zone immediately. Forcing a mobile phone browser over a cellular connection to pull down 150kb+ of React framework code just to run an interactive file handler creates a visible delay in the page layout loading.
2. Why Astro Wins: The “Zero-JS by Default” Architecture
Astro takes the exact opposite engineering approach. It is server-first and static-first. When a user lands on the site, Astro compiles the page layout into clean, raw, semantic HTML and CSS with zero runtime client-side JavaScript shipped to the device.
Next.js Pipelining:
[HTML Layout] + [Full React Runtime Bundle] ---> [Browser Hydration Wait Window] ---> [Upload Zone Functional]
Astro Pipelining:
[Pure HTML/CSS Static Shell] + [Isolated Client Upload Component] ---> [Instant Time-to-Interactive]Using Astro’s unique Islands Architecture, I can keep the entire marketing, copy, and FAQ section completely static. The only piece of JavaScript on the entire domain lives inside a small, isolated “island” — the file drag-and-drop zone.
Get David Mill’s stories in your inbox
Join Medium for free to get updates from this writer.
By declaring that individual component as interactive using a hydration directive (like client:load), Astro loads only the specific JavaScript required to process the canvas conversion, stripping away the framework runtime completely.
What Exactly We Are Trying to Achieve with a PDF-Related SaaS Product
The primary goal of building this utility app is to establish a secure, privacy-first alternative that solves the structural flaws of legacy converters.
1. Edge-Based Client-Side Conversion
Most sites force you to hit “Upload,” send your data to an AWS bucket, convert it using server resources, and hit “Download”.
We rewrote this execution loop. The current website uses browser-native canvas components and client-side processing. When you drag a PNG file onto the upload zone, the images are rendered locally in your browser memory space and compiled directly into an encapsulated PDF wrapper.
No data ever crosses the network to a third-party server, providing ironclad privacy for sensitive financial or personal identity files.
2. Flawless Organic Search Indexing (SEO)
Because search engine web scrapers favor fast, content-rich HTML pages over heavy JavaScript apps, Astro’s generation strategy provides an exceptional baseline for organic search optimization.
The FAQs, guide instructions, and core copy are fully pre-rendered in structural text files, making it incredibly easy for Google to index the tool for high-intent long-tail keywords.
3. Creating a Lead Funnel for the Core Ecosystem
Beyond acting as a helpful utility, our website serves a broader business purpose for HandanCorp. It functions as a clean, high-traffic organic discovery point.
By maintaining an elegant, zero-ad utility, we establish immediate brand trust, allowing us to naturally feature cross-promotional hooks for our native desktop software solutions in the footer margins without degrading the interface experience.
The Takeaway
Choosing the flashiest framework isn’t always the right choice. Engineering a successful software footprint requires mapping your tools directly to your product goals.
Next.js is a powerful framework for full SaaS applications, but for high-speed, content-driven utilities where conversion and performance dictate survival, Astro is the superior choice.
