12/30/2024
5 min
If youāve been around the web development world a decent amount of time, you probably know the meme about how thereās way too many frontend frameworks. Most of these frameworks arenāt worth mentioning let alone using. For many frameworks, itās just different ways of accomplishing the same thing and introduces added complexities that donāt make a whole lot of sense for me as a developer. However, Iāve recently been wanting to revamp my portfolio website to add some additional features and I found it a perfect time to use one framework I personally think very highly of which is Astro.
When Astro first started getting traction I was curious and took some time build some entry-level projects with it. I quickly fell in love with how simple and content focused the framework was. Besides having a great developer experience, Astro also has amazing performance and is highly extensible. That being said, Astro was still in its infancy at the time, so I didnāt entirely feel comfortable using it to build production-grade applications. However, since it has first came out, the community adoption and continued support that it has garnered has ultimately led to me to make the decision to rewrite my portfolio using Astro. Here are a couple of reasons why:
One feature that I put at the forefront of my website is my blog page. As such, it was the feature that I wanted to expand the most upon for my website. I didnāt really care about having a mailing list or some automated feed, but I did want to add features such as article tags as well as automating everything except the writing process itself. Specifically, I didnāt want to have to manually update the metadata and manage multiple files just to create a single article as I had to do with my previous portfolio website. I believe this is where Astro shines the most. The built-in markdown features where you can treat markdown essentially as a webpage itself as well as write the metadata all in one file is truly amazing. While other frameworks also offer said features, to my knowledge it isnāt as easy and seamless as it is in Astro. Additionally, Astro supports more powerful and customizable .mdx files and has syntax highlighting out of the box.
print("cool as fuck isn't it? :L")If you need even more markdown features, Astro has also got you covered as you can add markdown plugins and customize them to your liking. Astro has great documentation on all the cool shit you can do with markdown which you can check out on their website.
Another big plan I had for my portfolio was to add a route that displayed some fun and cool photos Iāve snapped/collected over the years. Iāve been wanting to add a photo gallery for some time now as Iāve gotten more sentimental the closer to I am to graduating. However, my original plan of storing all the photos in my public folder in my previous SPA app just seemed to bloat the website way too much. Additionally, I noticed it would take some time for all the photos to load and overall it was just incredibly painful to deliver a good user experience. As such, another reason I chose to adopt Astro instead of another framework was because it was really easy to optimize and deliver images to boost overall performance and improve user experience. For the new website, I was able to simply move images to an assests folder under src/ and depending on the particular style, I could choose from a variety of Astro components to render the image. This entire process was stupidly simple as it took less than 2 hours to completely add all the images I needed (took more time than necessary styling the damn thing LOL) which I donāt think I can say the same more frameworks like Next.js.
Speaking of how easy it was to optimize all the new images, the 3rd and probably most important reason I think you should use Astro as well is how simple it is. If you donāt care as much about performance and making your frontend as optimized as possible, then nothing I say will probably convince you to switch from a simple SPA. If you do care about performance and minizing client-side javascript then Astro is amazing since it defaults to SSR which means youāre essentially serving static HTML making it a lot better for SEO. In the case you want to add behavioral Javascript for some other frontend stuff, itās easy as adding a script tag in your component or page which Astro automatically scopes.
Additionally, I loved how easy it is to transition from an existing SPA to Astro as it supports other frameworks and all you need to do is a tweak some stuff to get JSX working. Astro also has great documentation (if I havenāt already mentionedā¦) that cover everything from fundamental concepts like dynamic islands to common patterns like data fetching. When rewriting my portfolio, I nearly exclusively relied on the documentation page as it answered 95% of all the questions I had when trying to figure out how to make specific features.
Overall, my experience with using Astro has been fantastic. While I know some people will definitely disagree with my opinions, I personally think that if youāre building anything that has a lot of static parts such as a blog or landing page, you should give Astro a try!
Thanks for reading. Cya š.