Why we choose Astro to build our webs?

Astro is an all-in-one web framework for building fast, content-focused websites.

Quote from Astro website.

Astro is a new technology recently released. One of the thousands, if I may. But a promising and complete one. So we will talk about why we use it as our base for websites instead of ReactJS or just base HTML.

Performance is key in Astro

Astro has a pattern that they call Islands. It is not new, but they extract a lot of it.

These called “Astro Island” are interactive components, in an otherwise static page of HTML. We know plain HTML is the fastest way, but it has almost zero interactivity. Islands are small components that exist in a base of HTML, making the base load super fast, and just using small components here and there. As is called on the Astro website, “Think of them as islands in a sea of static, non-interactive HTML”.

So, anytime we build our website in Astro, Astro compilers first turn them into pure HTML, with no client-side JavaScript by default. Even if you use any other frontend framework, like React, Vue, or Svelte, Astro will prioritize the base HTML and then hydrate it with interactivity, if there is interactivity.

In the case of React, you must load all the JavaScript to start printing the base HTML, in Astro, the HTML is shown first, and then it adds the remaining JavaScript. This keeps every site fast by removing the unused JavaScript from the page and only using it when necessary.

Performance is always important. But when that time is proven that gives you more engagement, conversions, and money, it is a no-brainer why we choose speed and performance.

• Every 100ms faster → 1% more conversions (Mobify, earning +$380,000/yr)
• 50% faster → 12% more sales (AutoAnything)
• 20% faster → 10% more conversions (Furniture Village)
• 40% faster → 15% more sign-ups (Pinterest)
• 850ms faster → 7% more conversions (COOK)
• Every 1 second slower → 10% fewer users (BBC)

Quote from Astro website.

Astro specializes in getting the best of both words. Light speed of a simple HTML base, and interactivity and reactivity from just the necessary JavaScript.

Quoting Astro website, “An Astro website can load 40% faster with 90% less JavaScript than the same site built with the most popular React web framework. But don’t take our word for it: watch Astro’s performance leave Ryan Carniato (creator of Solid.js and Marko) speechless.”

That is why we choose Astro.

Using React, Vue or Svelte?

Yes, you hear it right, Astro lets you use any other framework you want on top of it. The Astro people call this Bring Your Own UI Framework (BYOF). It is not that is needed, we have built a lot of sites with just Astro as a framework, not adding more than simple packages to it, Astro already includes components, routing, asset handling, building process even bundling, and a lot of optimizations, and more. But in case we can’t do want we want in the base Astro, we can add React or Svelte (like this site) and use it with all the benefits of Astro.

Content websites instead of apps

Astro was designed to build content-rich websites. And we specialize in that. Our clients priority it is to get known by the people, to show what their offer and to gain clients and attraction. A blog, for example, a portfolio, or landing page. We do not build apps, with complex user databases, dashboards, or a SAAS for example, not that is not possible in Astro, but it is not its main use.

Astro focuses on content and delivering that content fast. And it does it well.

Server-side rendering

Astro focuses on server-side rendering as much as possible instead of client-side rendering. When using Astro, the website is built on the server and then given to you. You receive a full copy of it. When using React, for example, you receive an empty web, and then the website is loaded. Interesting difference, huh? This approach has its benefits, but an expensive tradeoff in performance. And velocity in these times is more important than ever.