a path to multi-page applications • DEVCLASS


The Astro team has version 1.0 releasednoting that organizations that already have deployments built with this web framework include Google’s Firebase, Trivago, The Guardian, and IKEA.

Try Astro

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

“The SPA model has its advantages. However, these come at the expense of additional complexity and performance trade-offs,” the docs claim.

Typically, a SPA retrieves content through JavaScript. So while the initial page load is fast, client-side processing and other 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 state management of multiple pages”, thanks to simpler state management and a shared memory on what the user perceives as several pages.

Astro is supported by a Visual Studio Code extension

While Atro in some ways sounds like a throwback to the PHP approach, which drives content management systems like WordPress and Drupal, or other traditional frameworks like ASP.NET, “with Astro, it’s not all than HTML, CSS, and JavaScript (or TypeScript, if you prefer),” the team said. 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 user interface language, stored in files with an .astro extension, which is compiled into HTML when creating a project. One of the key features is the ability to use components from one or more other frameworks including React, Preact, Svelte, Vue, etc. 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 user interface component on an otherwise static HTML page.”

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 default fast performance story,” the docs claim.

That said, in March, the Guardian’s 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 fit our use case. So we built our own custom solution, three times as much. Exactly what was missing in Astro’s approach has not been specified, but making the right choice is complex. The Guardian nevertheless uses Astro for its engineering blog.

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


Comments are closed.