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!
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.
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-htmlattribute 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.
Also, the SSR feature looks quite promising in Astro, but I'm yet to explore it.
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.
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)