Engineering

Why Astro Outperformed Next.js for Our New Website Rebuild

admin
•
Astro Next.js Performance Web Development Architecture
Share on X Share on LinkedIn Share on Reddit

Why Astro Outperformed Next.js for Our New Website Rebuild

When we first launched the Tasrie IT Services website, our team used Next.js and hosted it on Vercel. At that time it felt like the right choice. Next.js was popular, React-based, and backed by a strong ecosystem. Vercel offered simple deployments, CI/CD automation, and built-in optimisations. But as our company grew and our website evolved, we began to see technical and strategic limitations that were affecting performance, flexibility, and long-term control.

This article explains why we migrated away from the tightly coupled Next.js + Vercel stack, why Astro became the clear winner for our rebuild, and why starting from scratch proved to be the best decision for performance, scalability, and engineering freedom. Today, the new website scores a perfect 100 across Performance, SEO, Accessibility, and Best Practices. Lighthouse score showing 100 in all categories

The Problem With Next.js. Framework Convenience That Turns Into Vendor Lock-in

Next.js is a capable framework. But as it evolved, it became increasingly entangled with Vercel. Many features were designed to work only on their platform, creating limitations when you try to deploy anywhere else.

1. Next.js is increasingly optimised only for Vercel

Core features like the following perform best only on Vercel:

  • Image optimisation
  • Middleware and edge functions
  • Serverless execution
  • Build output layouts
  • Route handling and caching behaviour

This dependency means the framework and hosting are not independent. The moment you try to host Next.js outside Vercel, you feel the friction. It is not a neutral framework anymore. It is built to push you toward a specific vendor ecosystem.

2. Scaling on Vercel becomes expensive

Vercel is designed around convenience, not cost efficiency. Features like serverless functions and image transforms are billed aggressively, and global edge execution introduces additional costs. As a DevOps consulting company, we prefer to control our infrastructure instead of paying a premium for vendor convenience.

3. Too much JavaScript for a content-heavy site

Our website is not an application. It is a marketing and knowledge platform. For this type of site, heavy client-side hydration is unnecessary. Next.js still ships React, hydration code, and additional JS to the browser even for static content.

This impacts:

  • Load times
  • Interactivity
  • SEO scores
  • Core Web Vitals

We wanted a framework that prioritises performance without forcing JavaScript onto pages that do not need it.

4. Debugging becomes tied to the host

When something fails, you debug Vercel. If one environment behaves differently, you investigate Vercel. If a build behaves inconsistently, you troubleshoot Vercel. Over time, the hosting provider becomes part of your development problem.

We believe in clean architecture. Application and infrastructure should be decoupled. Next.js and Vercel blur this line and create dependency.

Why Astro Became the Right Choice for Us

Astro stood out immediately because of its simplicity, performance-first design, and flexibility. It allowed us to build the website the way we wanted, not the way a framework or hosting provider dictated.

1. Zero JavaScript by default

Astro ships no JavaScript unless you explicitly enable it. For 90 percent of a marketing website, you simply do not need JS on the client.

This leads to:

  • Faster rendering
  • Higher Lighthouse scores
  • Less hydration time
  • Superior performance on mobile

When a component needs interactivity, we hydrate only that component using Astro Islands. The rest remains clean static HTML.

2. No vendor lock-in. Deploy anywhere

Astro does not care where you host the project. You can deploy to:

  • Cloudflare Pages
  • AWS S3 + CloudFront
  • Netlify
  • Docker
  • Vercel
  • Even a simple server

We chose Cloudflare Pages because it provides fast global CDN distribution, zero cold starts, instant cache invalidation, and very low cost. Most importantly, we regained full control of our architecture.

3. Partial hydration with Astro Islands

Astro’s island architecture hydrates only the components that actually need JS. This gives the best of both worlds:

  • Static HTML for content
  • React, Vue, Svelte, or Solid for interactive elements
  • Zero wasted JS

This approach gave our site a huge performance boost and eliminated unnecessary complexity.

4. Cleaner development experience

Astro is simple. It avoids hidden magic. It avoids over-engineering. And it works with any UI library we choose. Our developers immediately felt the difference.

Rebuilding the Website From Scratch. Our Approach

Instead of rewriting the old Next.js project, we took a strategic decision to rebuild everything from scratch. This allowed us to design the website architecture properly without old dependencies dragging us down.

Step 1. Reorganising the structure

We created a clean, modular structure using:

  • Reusable Astro components
  • Standardised layouts
  • Markdown for insights and case studies
  • SEO optimised routes
  • Clear folder separation

This made the codebase easier to grow and maintain.

Step 2. Rebuilding every component with performance first

We redesigned and rebuilt:

  • The homepage
  • Service pages
  • DevOps and automation pages
  • Case study modules
  • Navigation system
  • Footer
  • Contact and booking CTA flows

Every component was written with minimal or zero JavaScript. Only interactive elements kept React.

Step 3. Migrating hosting to Cloudflare Pages

Cloudflare offered advantages that matched our DevOps standards:

  • Global edge caching
  • High performance
  • Very fast builds
  • Strict cost control
  • No vendor dependencies
  • Native support for static and hybrid sites

The deployment workflow became cleaner and more reliable.

Step 4. Testing, measuring, and validating

Once the rebuild was complete, we ran multiple Lighthouse audits. The results were outstanding. The website consistently scored:

  • 100 Performance
  • 100 SEO
  • 100 Accessibility
  • 100 Best practices

These scores confirmed the architectural decision. Removing unnecessary JavaScript, removing vendor lock-in, and rebuilding the site with Astro created a significant performance improvement.

The Final Result. A Website That Reflects Our Engineering Standards

This migration was not just a technical change. It was a strategic improvement that now gives us:

  • Full ownership of infrastructure
  • Faster global performance
  • Lower hosting cost
  • Zero vendor lock-in
  • Easier maintenance
  • Cleaner architecture
  • Superior SEO performance
  • A future-proof foundation for growth

Astro outperformed Next.js not because the framework is better for every use case, but because Astro is the right tool for content-driven, performance-critical websites. Our new website finally reflects the engineering values we apply for our clients: use the right tool, avoid unnecessary dependencies, focus on results, and prioritise long-term sustainability.

If you are evaluating your own website stack or considering a migration from Next.js or Vercel, we are happy to help assess your architecture and offer recommendations based on real engineering experience.

Back to Blog