10 Nov 2024 , Manmeet, Development
I recently wanted to build my own website, and I was thinking about using React. But I wasn’t sure which JavaScript framework to use. Suddenly, I got an email from Google IDX saying I’m no longer on the waitlist and can try their latest online coding platform. So, I logged in with my account and started a new project.
I looked at different technologies and frameworks, and I saw this one called ‘Astro’. I’d never heard of it before. So, I went to the Astro website and checked out their intro.
It looked really cool, but I wasn’t sure if I should really invest time learning this new framework (I’ve seen so many new JavaScript frameworks come and go). But I decided to give it a try and started building the build a blog tutorial and let me tell you, I was blown away by how simple this framework is! The best part is that you can integrate “TailwindCSS” and “React” directly into Astro without having to do any extra configurations.
I can say, I’m blow away by how smooth the entire thing was.
I recently ran a Lighthouse audit on my personal website and achieved a perfect score of 100! 🚀 This was a huge milestone, as optimizing a site manually to this level typically requires extensive effort and meticulous attention to best practices. For a React-based website, this process could easily take a day or more, and even then, hitting a flawless score is no guarantee. Astro’s built-in features, like the Image component, automatically handle image optimization, reducing load times effortlessly. Coupled with lazy loading, these enhancements make achieving top-notch performance a breeze, all without writing additional complex code.
Imagine building a React site and wanting to style it with Tailwind CSS. Normally, you’d have to install the npm package, configure files, and add base styles manually before you can start using Tailwind. With Astro, the setup is far simpler. Just run npx astro add tailwind in your terminal, and you’re done! This one command handles everything, saving you at least 30 minutes of setup time.
Astro’s seamless integration extends to frameworks like React too. You can easily add React with a single terminal command and start creating .jsx components. These components work perfectly within Astro without any additional configuration, making it extremely convenient for developers.
Whether you want to set up a blog, project showcase, or any content-driven page, Astro makes it incredibly straightforward. With built-in APIs like glob and support for Markdown (.md and .mdx), adding and managing content is a breeze. Astro offers flexibility in choosing between Server-Side Rendering (SSR) and Static Site Generation (SSG). Personally, I prefer the SSG approach, as it allows me to easily manage static content like this blog.
In contrast, with React, you’d likely need to build an API to handle static content. Astro simplifies this by letting you store Markdown files directly within your project, making content integration smooth and hassle-free.
Well with what I have discovered today, I have fell in love with this awesome framework and from now on any website that requires the static content, landing pages, blogs etc will be built using Astro and complex projects with authentication, complex animations, and stuff like this will be built using a framework like React.
I know I can do this authentication stuff and SSR with Astro but I think React is much better for this use-case as of now. However if in future, Astro develops to make this stuff even more easy then I might not hesitate to shift completely from React to Astro framework.
Overall, I’m really happy that from Google IDX, I came to explore this awesome framework that I never know existed and now this framework is default for any website or web project that doesn’t need too much dynamic content or with light dynamic content as we do have islands. I can say one thing Astro is Awesome.
Thank you for reading.
thatsmanmeet