Astro Revs Up Static Sites with Partial Hydration

Over the last decade, the desire to increase interactivity on the web has led to more and more client-side JavaScript with frameworks like Angular, Vue, and React. While this trend has been a boon for developers looking to create full applications on the web, it has meant more and more JavaScript shipped to the client-side, which can bog down users with older, less powerful devices.

In response, one recent trend has been to try to shift back toward server-side rendering and delivery of content. One approach, taken by tools like Gatsby, Jekyll, and Hugo, is to prebuild websites into static HTML and load them onto content delivery networks spanning the globe, which allows for super-fast load times but reduces the amount of interactivity possible. While those sites have begun introducing functions at the edge to add in more interactivity, they are still limited there.

Enter Astro

Astro, a self-proclaimed “new kind of static site builder for the modern web”, launched nearly a year ago now and is one tool looking to solve this problem with yet another approach, said Astro CEO Fred Schott in an interview with The New Stack.

“It was our attempt to solve some of the problems we saw in the current set of status quo developer tools around too much JavaScript bloat, too high a bar for people who are looking to get into web development, where they almost have to learn React, or Svelte or any JSX language just to get started with building a ‘hello world,'” said Schott. “We really wanted to try to build something that brought web development back to its roots, where it wasn’t just ‘What’s the best JavaScript framework?’ it was ‘What’s the best way to build a site and create HTML, CSS and JavaScript, all equally in that equation?'”

Like many of the responses to JavaScript-heavy frameworks, Astro tries to put the foundational blocks of the web back front and center. Astro does this by employing Markdown which also supports JavaScript expressions and Astro components. Schott explained that Astro is a superset of HTML so anything that works in HTML also works in Astro.

“It feels really familiar to anyone who’s worked with HTML, but you can then sprinkle in JavaScript as you need it and sprinkle in your favorite web framework as you need it,” said Schott. “If all you know is HTML, you should feel really at home with Astro, but at the same time, you can then bring in components from your favorite framework to essentially hydrate on the page as you need them.”

Partial Hydration

There are two basic ideas Schott alludes to here that he says differentiates the framework from others: partial hydration and the ability to work with any framework.

For many frameworks, the page loads as one unit, which means that the user cannot interact with any part of it until everything loads. This also has the bandwidth and compute implications, as it means that a page full of image carousels and other features can take time to load and use up bandwidth.

With Astro, developers can build a site with any front end they like — React, Preact, Svelte, Vue, SolidJS, AlpineJS or Lit, for example — and all client-side JavaScript is stripped out entirely by default during the build process. Partial hydration, however, allows you to create interactivity by putting back in some client-side JavaScript where it is absolutely needed. At the same time, partial hydration allows the developer to determine what aspects are loaded and when, using something they refer to as an “island architecture”.

“That idea of island architecture and partial hydration is you’re hydrating components in isolation, in parallel separately. The implication there is that, that ‘buy’ button that you need some JavaScript for is going to hydrate way faster in isolation, while an expensive image carousel further down the page is rendering and loading totally separately,” explained Schott. “You can even start to control the loading of individual things. So, the ‘buy’ button, super important, hydrate that instantly, but an image carousel lower down on the page, we don’t really care about that, we’re going to give that the ability to hydrate only once it becomes visible. If you never scroll to it, you never pay the cost of it.”

Currently, Astro provides the benefits of a static site generator with JavaScript “sprinkled in”, but the tool is making some moves beyond that with the introduction of server-side rendering capabilities and the release of a v1.0 beta. Schott said they have been adjusting their direction over the past year of development and looking into server-side rendering for e-commerce use cases. He pointed to a chart of interactivity that was shared on Twitter, noting that “with our announcement next week we’ll be hitting the ‘e-commerce site’ stage of the chart as well, but otherwise we’re not going any further right in terms of our focus.”