Pick the right tool for the job

I initially built this website with React + Next.js + Tailwind. Pretty neat stack, in my opinion. But I realized that the React part was a complete overkill.

React at its core is meant for creating interactive websites. My website is basically entirely static - my CV, some projects, and a blog. Next.js could definitely do all of that - but there was a better way.

Astro - simple, straight to the point

The blog you are just reading made me rewrite the project in the new framework. It just checked all the boxes for me - and there aren’t very many:

Easy markdown rendering

I knew I wanted to do a blog on here eventually. With React, I would have to use a library + storage + fetching and whatnot. Having static files rendered as blog posts is just awesomer.
First-class Tailwind support
React is still an option

I feel much safer going with Astro knowing, that I can fall back on familiar React components if need be. Who knows where will this project take me? One day, static HTML might not be enough :)

I used React components for the tags you see on this very post for example. Their color is based on a hash of their text content. Astro boils them down to HTML at build time - no JS is shipped to the browser!

Next might be faster, actually

One thing I see mentioned with Astro is that is fast. And it is - pure HTML and the smallest possible javascript sounds like a speed recipe. But never underestimate Next, it is truly amazing.

astro speed test — Astro - simple speed test

next speed test — Next.js - simple speed test

(The images are gone. This is what I get for trying us a shady chinese CDN)

I think that image optimization is where Next gains the most advantage. Most of the my homepage size actually comes from the few photos I have there. With Next, they are scaled down to the resolution needed - you can upload your photos in the highest quality you have and Next will make them fast.

Conclusion

I found myself guilty of answering a question before it was even asked. I didn’t give much thought to what my website actually needs and jumped straight to React because it’s what I know. And then ended up rewriting a small portion of it :)

Don’t just go for the benchmark numbers. Think about what you really want and need - and choose according to that!