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).
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.
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!
This is one of the main reasons why I switched from Next.js to Astro.
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.
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/
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 !
While it has many pros, Astro is not “the one” for everything. It has some cons compared to Next.js.
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!).
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.
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!
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!