DEV Community

Sidharth Mohanty
Sidharth Mohanty

Posted on

I Switched to Astro for My Portfolio Website, and It's Awesome!

Astro, as they say, is the all-in-one web framework designed for speed. You can pull your content from anywhere and deploy it everywhere, all powered by your favorite UI components and libraries. I kind of agree; it's like we're writing pure HTML, CSS, and JS code, reminiscent of the old days of shipping pure HTML to the browser. This allows websites to become interactive in just a few seconds and also means moving away from frontend frameworks that ship JS and are bloated with other stuff, which slows down the initial load of a webpage.

Okay coming to why I tried out Astro? To be honest, it's YouTube and blogs hyping "blazingly fast" websites. And yes, I wanted a blazingly fast website too!

Why Astro

And it really is blazingly fast!

A note to remember: This is not a SPA; it's an MPA. The number of pages that you create inside the pages/ directory will be built into different HTML pages.

Just like React or any frontend frameworks, where we think in terms of components, it's the same here as well.

Components structure

This means less code duplication, and everything can be in order, as opposed to static HTML sites that we used to create.

Also, this doesn't mean we cannot add any interactivity. We most definitely can, and this is very neat with Astro because we can choose our own frameworks that we are comfortable with and mix and match them as well.

Ref: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

The developer experience is superb, I must say. Coming from a React.js background, I got familiar with the syntax and structure in no time. I explored some things through experimentation and googling. Here are some of them:

  • The server build time block contains top-level await, so you can directly fetch your blogs or data.
  • It has a pretty similar JSX templating structure (map, conditionals, etc.). The only difference is that for interactivity, you need to use <script> tags like in the old days (getElementById, :P). But this was quite fun as I was just building my portfolio and didn't want any hefty useEffects or interactions (dynamic behavior).
  • The set-html attribute is great! For every page I created, I wrote down some constant arrays where the values were strings that contained HTML elements. For example, if I needed to add a link to some page under an experience's description, I structured the content using strings, which I can now directly render as HTML without using any third-party libraries.
  • Integrations? Please take a look at the number of integrations they have, its enormous. This means all the good work has already been done for you, just plug and play. I used the Tailwind CSS integration, and it works like a charm. Although, in the near future, I am planning to study a bit about website SEO and integrate some other plugins to make my website even cooler.

If you want to see the end output that Astro gives, here's a sneak peek: The server builds the entire HTML pages. The client-side <script> that we define inside the Astro components gets attached to the <head> elements of the respective page HTML.

Build Output

Also, the SSR feature looks quite promising in Astro, but I'm yet to explore it.

Lighthouse report:

Lighthouse report

Performance Insights (from builder.io): This tells you how bloated your website is with JS/Images/CSS and how you can optimize them.

Performance Insights

In the end, performance really matters right? :)

Link: https://sidharthmohanty.com

GitHub Link: https://github.com/sidmohanty11/sidmohanty11.github.io

Please let me know your feedback on the site. I would love to make some improvements. If you've explored Astro and want to share some knowledge, that would be amazing! I am in no way an expert on this topic, just sharing my experience with Astro because I loved the developer experience and how fast you can build sites and how fast the sites can be (no pun intended). Cheers!

Thanks for tuning in! See you next time!

Top comments (0)