Skip to main content

Why I chose Astro Over Next.js for this website

When I first started rebuilding this site, I was hesitating between Nuxt and Next.js, just like everyone else. Those two are the de facto standards for modern Vue or React apps, and for good reason: their ecosystems are massive, and they can handle almost anything.

Truth be told, I’ve never been a big fan of Next.js or React. They feel bloated and heavy to implement. It is still a great framework, and I tip my hat to the team. But for small sites, it’s simply overkill.\

I had heard of Astro before, so I decided to give it a try.

Astro’s zero JavaScript by default philosophy immediately clicked with me. With Next.js, even a simple landing page tends to bundle React and hydration logic whether you need it or not. Astro, on the other hand, ships pure HTML to the browser unless you explicitly opt in to interactivity.

The result?

  • Pages load almost instantly.

  • Lighthouse scores shoot up.

  • You spend less time optimizing bundles and more time designing.

For a small site or portfolio, that’s perfect.

On top of that, Astro is framework-agnostic, so I can drop in React, Vue, or Svelte components anywhere, and Astro will only hydrate them when necessary. It feels like writing real websites again instead of fighting the framework.

I’m sure I still have a lot to learn about Astro, but so far it’s been a joy to use. At some point, I’d love to experiment with how it handles data-heavy or dynamic sites, just to see how far it can go.

Time spent on the project

I didn't have a deadline set for this project so I took my time to experiment what I really wanted. I've spend a lot of my time on the design. I had it a rough draft on paper first and as I was building it I adjusted and came up with new ideas. It was fun to work this way when usually it is from a Figma file. The first phase was just the homepage. I hadn't used Astro before, so spent some time doing their blog tutorial.

Phase 2: Integration and Refactoring

The second phase focused on integrating a CMS and refactoring the code. I am a big fan of Directus but my only issue with it is setting up the server, and I didn't want to go and setup it up on my VPS. I really wish they had kept a free version of their cloud service.

So I ended up with Contentful. It is straightforward and easy to integrate with Astro.

One issue I ran through was display the body of my blog. It would render but since it came from Contentful, it didn't have any tailwind classes. The solution was to use tailwindcss/typography

Overall he project ended up taking 23 hours.

Come up with a design

1 hour

Set up Astro project and read docs

5 hours

Integrate with Contentful

6 hours

Refactoring

1 hour

Design the project and blog pages

2.5 hours

Add content slices

3 hours

Fix build problems

2 hours

Deployment setup

1 hour

Write this article

0.5 hours

Total

23 hours