Why I've ditched Next.js forever! (for Astro)

In the fast-paced world of web development, choosing the right framework for a project is a tough job. It can be a decision that shapes the speed, performance, and flexibility of your website. Every few weeks, a new framework arises and promises to be the best thing since sliced bread. But how do you know which one is right for you? In this article, we will discuss why I’ve ditched Next.js forever! (for Astro).

As a frontend developer for more than 8 years, I’ve been working with React for 6 years, going almost through all the stages of React and seeing it develop day by day. On my projects, I work with Next.js, which I consider one of the best JavaScript frameworks. But I’ve recently discovered AstroJS, and I’ve ditched Next.js forever! At least for my website.

How my website was built

I’ve built my website with Next.js, using React and Typescript. Here is a link to the technologies I’ve used: I’ve enjoyed building it with Next.js, but I was not very contemptuous with the way that I handled my static pages, mainly adding useless JavaScript for hydration. So here I am! I’ve switched to AstroJS.

The difference in performance is small. If you subtract 10% from 0.8, it’s 0.08. It’s not a lot, but it’s something. And it’s something that I can control. I can control the performance of my website, and I want to make it as fast as possible.

Here’s why I’ve switched.

Astro is faster than Next.js

A big statement, I know! Hear me out. One of the most compelling reasons to make the switch from Next.js to Astro is the speed of SSG (Static Site Generation) pages. Next.js output renders plenty of unwanted things in the HTML. Here are some comparisons of speed between them: https://astro.build/blog/2023-web-framework-performance-report/ . Yes, I know they are on Astro website.

Depending on how heavy your website is, the little differences count!

Astro generates less JavaScript code compared to Next.js

Related to the previous point, Astro renders less code than Next.js. This means that the website will load faster. I’ve experienced that Next.js is also introducing the JavaScript code that was statically rendered on the server to the client of non-animated or non-interactive pages. This is not the case with Astro.

This is one of the main reasons why I switched from Next.js to Astro.

Content-First Approach

Astro simplifies content management by providing built-in support for collections that work seamlessly with Markdown. This feature aligns with the modern approach to content-first web development. It’s similar to Next.js with server components but offers a more integrated solution for managing content. I’m not saying you cannot do this with Next.js as well; I’ve done it countless times, but it seems easier with Astro. This article is even written in an MDX file that I’ve saved to GitHub, and it’s automatically deployed to my website through Vercel.

Feature Parity with Next.js

Astro doesn’t skimp on the features. It offers many of the functionalities you’d find in Next.js, including Hot Module Replacement (HMR), Server-Side Rendering (SSR), and Static Site Generation (SSG). Additionally, Astro enjoys official integration with Vercel, a popular hosting platform for web applications. Here is the announcement: https://astro.build/blog/vercel-official-hosting-partner/

Platform Agnostic

One of Astro’s standout features is its platform agnosticism. It can be used with any framework, or even without any framework at all. This flexibility is particularly appealing to developers who don’t rely on UI libraries or frameworks like React or Svelte for their websites. For those who prefer a more minimalistic approach to web development, Astro is a breath of fresh air in the React-dominated landscape.

Even if you prefer to work with React, Svelte or Vue, Astro is ready for it. It’s not a problem to use it with any of these frameworks. If you like mix up, you can use them all together: https://docs.astro.build/en/core-concepts/framework-components/#mixing-frameworks !

In my case, I’m not using any UI library or framework for my website, so I don’t need to use React, n’or Next.js. The only interactive Javascript package that I use is https://just-validate.dev/ for visual validation of my contact form, similar to how react-hooks-form works.

Cons of Astro compared to Next.js

While it has many pros, Astro is not “the one” for everything. It has some cons compared to Next.js.

Small built-in ecosystem

The most notable one is that Astro has a small built-in ecosystem. While you can use it with any framework you want, if you want to use it without a framework, it’s a little bit tricky. You might not have the libraries you are used to coming from Next.js. For example, I’ve generally used react-hooks-form for my forms, but I cannot use it with Astro. I’ve found a similar library, but it’s not the same.

A lot of Astro integrations are clunky and not as easy to use as the React ones (probably because there are very few of them). Here is the complete list: https://astro.build/integrations/, it’s smaller than the aggregated Awesome React list.

This also comes down to time in the market. Astro 1.0 launched in 2022, Next.js and, to an extent, React have been on the market for a very long time. For Next.js, 2016 to be exact, and React in 2013 (more than 10 years ago!).

Limitations in Templating Language

Astro’s templating language primarily caters to static components. If you need to incorporate dynamic components, you may have to resort to plain JavaScript or rely on a framework like React, Vue, or Svelte. For instance, I chose a plain JavaScript library for form validation to address this limitation.

If you are planning to do state management, you are out of luck with built-in solutions. Although, Astro is recommending nanostores

I find this a con and a pro at the same time, depending on your needs.

Conclusion

While I mainly use React & Next.js in most of my development with the companies that I work with, the approach of thinking “React is the best framework” is correct. There are many use cases where React shines, but there are also many use cases where React is not the best solution. Choose the right tool for the job; if you don’t find it the first time, keep looking. It’s out there!

Post scriptum

Thank you for reading! If you have any suggestions or questions, reach out to me through my contact form. I’m always happy to talk!