why i choose Astro

Updated July 2024

There are more than a few choices when looking for frameworks and component libraries in 2024.

Astro is a static-site generator with zero JavaScript up-front.

Astro is great for any real website, with or without a front end, because you will be able to build the fastest website possible using the framework(s) you prefer.

Update: We've started using the Astro Studio (beta) db host for one of our website databases, and it is great!

Syntax and Code

Astro components (.astro files) are a similar to Vue SFC components (.vue files) for encapsulating HTML, scripts, and styling within a template; however, Astro components are exclusively server-side-- they render as HTML at build time or on-demand.

Pages, layouts, and widgets in Astro are all "components."

Client-side interactivity can be added with vanilla JS or with isolated front-end components from a framework, such as Vue or React. (See Astro Integrations.)

.astro syntax is JSX-like HTML, with CSS and Javascript or Typescript.

CSS frameworks like Tailwind are supported.

Unparalleled page load speed

Astro maximizes static assets, minimizes client-side script, and optimizes hydration with full control incuding interactive Astro Islands. This gives your website the best possible speed performance.

Unless a website is a small webapp, or is a complex front-end like Twitter or Facebook, it doesn't make sense to use SPA technology. SPA is overkill for most websites with a navigation structure. With Astro, your website can be a custom hybrid of rendering modes with selective hydration.

Websites perform faster with static server-generated assets that are cached, and static pages are easier for search engines to crawl and index.

Astro islands

Astro embraces a design pattern called the islands architecture.

...the islands architecture encourages small, focused chunks of interactivity within server-rendered web pages

Astro components can use Slots to hold interactive components. These placeholders are used for dynamic regions, which are selectively hydrated on the client.

Nano Stores for state management

Astro Nano Stores is a super small state manager. We use this for state (visible to front-end components) and non-UI logic.

Some alternatives

My list of favorites (from 2023) in approximately descending order.

• Inkline: my favorite component library with excellent color control and other components; does not force Sass, but exposes some Sass variables and generates styling for you; Vite compatibility is great, and no technology is forced on the developer, except for the Inkline grid system—these bootstrap-like grid systems are common, but they unfortunately break style-free HTML;
• F3 is a PHP 'micro-framework'—my first choice for PHP-based websites; no troubles, and a pleasure to use;
• Vuesax—a component framework for Vuejs in Beta, which provides a lot of freedom (Sass and Bootstrap are not required);
• Vitepress—perfect for documentation sites;
• Vuetify—a fantastic library of components that is great if you're already planning to use Sass and Bootstrap;
• PrimeVue—a promising component library that currently forces you to use Sass/SCSS but plans to change that soon!
• Middlemarch is a SPA template available in both Vue + Vite + Pinia and React flavors—it shows how you might structure a SPA with pages, etc;
• Vuestic UI—a large Vue UI framework;
• Wave UI is a lightweight Vuejs UI framework;
• Keen UI—a simple Vue UI library, "inspired by Google's Material Design."
• Naïve UI—small component library for Vue 3.

---

#astro #vue #react #angular #ssg
#ssr #spa #mpa #hydration