Astro web framework 1.0 released: a route back to multi-page applications

The Astro team has released version 1.0, noting that organisations which already have some deployments built with this web framework include Google’s Firebase, Trivago, The Guardian and IKEA.

Trying out Astro

Astro is 16 months old according to the team. It is unusual in that it is both a static site generator and aims to remove JavaScript from the final build whenever possible. It also favors multi-page applications over single page apps (SPAs). The project is aimed primarily at content-focused sites rather than web applications.

“The SPA model has its benefits. However, these come at the expense of additional complexity and performance tradeoffs,” the docs claim.

Typically, a SPA retrieves content via JavaScript so while the initial page load is fast, client-side processing and further calls to microservices are required before a page is fully rendered. That said, the Astro team also states that “SPAs are the superior architecture for websites that deal with complex, multi-page state management,” thanks to easier state management and shared memory across what the user perceives as multiple pages.

Astro is supported by a Visual Studio Code extension

While Atro sounds in some ways like a return to the PHP approach, which drives content management systems like WordPress and Drupal, or other traditional frameworks like ASP.NET, “with Astro, everything is still just HTML, CSS, and JavaScript (or TypeScript, if you prefer),” said the team. The claim is that “An Astro website can load 40% faster with 90% less JavaScript than the same site built with the most popular React web framework.”

Astro has its own UI language, stored in files with a .astro extension, which gets compiled to HTML when a project is built. One key feature is the ability to use components from one or more other frameworks, including React, Preact, Svelte, Vue and more. By default these components are pre-built and rendered as static HTML, but it is also possible to use a directive that renders them on the client. This uses the concept of Astro Islands, where an island means “an interactive UI component on an otherwise static page of HTML.”

The idea was not invented by the Astro team but it is now one of the main implementations. “Islands are the secret to Astro’s fast-by-default performance story,” the docs claim.

That said, back in March the Guardian web engineering team said “There is no standard way to implement this pattern. Frameworks such as Eleventy, Marko and Astro offer various APIs but none of them met our use case so we built our own custom solution, three times over.” Exactly what was deficient in the Astro approach was not specified, but doing this right is complex. The Guardian does nevertheless use Astro for its engineering blog.

Astro is sponsored by Netlify, a hosting company which no doubt hopes that Astro implementations will end up on its servers. The source code is on GitHub under the MIT license.