Next.js has been making waves in the JavaScript world, drawing a lot of attention from developers and tech enthusiasts alike. The reason for its rising popularity isn’t hard to pinpoint. Users find it user-friendly and appreciate the wealth of tools and libraries at their disposal. Furthermore, the capability to pre-load websites on the server gives it an edge, making it more than just a traditional front-end framework. It’s quickly cementing its place as a preferred choice for those looking to harness the power of JavaScript for a complete web solution.
Enter Astro, the new kid on the block. While it might not have the widespread recognition of Next.js just yet, it’s carving out its niche. Its selling point is its no-nonsense approach. Rather than overwhelming users with a myriad of options, Astro keeps it straightforward, offering only the essential tools needed to get the job done, all while maintaining a lightweight footprint.
Given the buzz around these two, I felt a comparison was in order. I decided to pit Next.js and Astro against each other, specifically focusing on their capabilities as static site generators. It promises to be an interesting showdown, and I’m eager to share my experiences with both.
Simplicity and Ease of Use
When it comes to generating static websites, I truly believe that simplicity should be at the forefront. A technology tailored for this purpose shouldn’t be overly complex; in fact, it might even lean towards being refreshingly straightforward.
Next.js is able to operate in SSG fashion and many use it in that way. To switch from SSR you have to just change a function that returns from your page code.
Other than that you are able to use most Next features as normal. Additionally Next is able to regenerate such a pages from time to time if that’s important for you. This opens a lot of possibilites if you would like to grow your page. However, this might be more than what some users need, bordering on excessive. Also, when it comes to content, using formats like markdown can require some additional effort. You might need to bring in external tools like remark to get your pages rendered.
On the other hand, Astro seems to prioritize static site generation. It’s designed with this focus in mind. The built-in support for markdown content is a testament to its simplicity — adding content is a breeze. Additionally, crafting pages in Astro is intuitive, thanks to its unique format. This format feels familiar, like HTML, but with some added elements inspired by JSX. If you’re familiar with basic HTML, navigating through Astro’s templates will be a walk in the park.
This straightforwardness is one of its strong suits. When you contrast this with Next.js, it’s evident that with Astro, you don’t need to come in with a vast reservoir of knowledge. Even by just examining a sample app, the workings of Astro are clear and easy to grasp.
Speed
Static websites are popular for good reasons. They offer cost-effective deployment, which is a big win for those on a budget. They can handle more visitors as they grow, making them scalable. Plus, they’re fast. In a world where waiting a few seconds for a page to load can feel like forever, this speed is a big deal.
Many people keep saying that Next.js is incredibly fast because it’s rendered on a server. It’s true, server-rendered sites, including static ones, are quick. However, there’s a significant “BUT” that often gets overlooked. Next.js leans on React to function. This means that even if a site appears fully ready, it still needs to “hydrate” React. This approach brings two additional problems.
- One issue is that if there’s a mistake when loading JavaScript, the website might not show up at all. In some cases, turning off JavaScript might be better because only a few features would be missing. Ok, I admit, it’s a hypotecial.
- Second one is sending 80kB of JS just to run React on a page that is already rendered. Don’t believe me, visit SSG demo for Next. Also all props are dumped as JSON in the page body. Don’t get me wrong Next.js is still fast, as most of the stuff they are adding is non-blocking. It’s just wasteful as most of this stuff is really not needed on a static website.
Scripts added by Next.js
Then there’s Astro. It goes its own way, creating only the basics: simple HTML, CSS, and JS. There’s no React and no extra steps, just clear-cut rendering. If you want to add React, you can, but that’s up to you. Astro doesn’t push it on you. As a result you end up sending to the client only assets your site actually needs. This approach feels right to many, including me.
Build and deployment
I would say in this category it’s a tie. Both Astro and Next.js produce ready to use package with a single command. This package can be deployed anywhere you want - S3, Cloudflare pages, Netlify, Vercel, your own crappy web hosting - doesn’t matter. Both require more sophisticated deployment in order to access more advanced features. Of course this is reasonable and expected. In such a case there are a plenty of hosting companies that will deal with it for you, for a right price.
Verdict
For me Astro is a clear winner when it comes to static site generation. It’s simple, it’s fast and easy to use. Also it feels it was build with purpose (being being agile and fast), Next.js feels much more general purpose (besides making money for Vercel).
You may feel that I’m biased against Next.js and you are 100% right.
This prejudice comes from my experience. I worked on migrating a pretty big frontend to Next.js. It was ok to make it work, but it was extremely difficult to make it work right, as you constantly bump into weird obstacles. Most of these issues arise because Vercel has created a heavily opinionated framework optimized for their platform. Seriously it’s the most opinionated piece of sofware I worked with in my 12 years career. It got a little bit better between versions 12 and 13.
Astro on the other hand was created to work anywhere. Also it just gets the basics right, especially when it comes to static site generation. And that’s why I recommend it.