Astro Islands Pattern Are An Alternative to Single-Page-Apps
Choosing a language and associated framework for a web application often meant a binary choice between classical server-side rendered applications or Single Page Applications (SPAs). SPAs were a paradigm shift, moving “intelligence” from the server to the client, offering a native app-like interface experience and speed, but that came with increased complexity.
Frameworks like React, Angular or Vue.js have made it easier to create SPAs, but you still need more competent developers compared to many traditional server-side rendered applications. Worst still, the popularity of these JS frameworks means you’re competing, often with larger companies, for dev talent.
A recent consulting project forced me to think our approach to an SPA application we’d inherited. In our use case the SPA felt like overkill and as a start up, we had limited developer budget, so we really were caught between a rock and a hard place. That’s when we discovered the Astro Framework.
I was superficially familiar with the Islands Architecture Pattern but never had a reason to deploy one. Having now used Astro Islands, I’m surprised they’re not more common, but that might explain why Astro has grown so quickly.
Head over to Jason Miller’s blog or pattern.dev to learn more about “Islands”, but essentially you can inject rich interactive UI components typical of SPAs, in a [[ Server Side Rendered Application|Server-side Rendered ]] HMTL page. These components, or “Islands”, can be modified without reloading the whole page. Islands on the same page are isolated from each other, but they can “still share state and communicate with each other, even though they run in different component contexts.”1 which makes them even more powerful.
We directly observed these benefits with Astro:
- Reused 70% of the legacy SPA code.
- Rewriting SPA code to use with Astro was straightforward.
- Application speed – While we didn’t measure the performance difference, benchmarks confirm our impressions about speed.
- Improved SEO because of the static content which was easily crawled by search bots.
What’s more, our developers were impressed, finding it easy and enjoyable to work with. Stackoverflow’s 2024 developer survey found 72% of developers who used Astro wanted to continue using it, which is a great endorsement.
Astro’s website says its best suited for “building fast, content-driven websites”, but I think they’re underselling Astro, and it nearly put us off using it. Note, “Islands” aren’t unique to Astro, and can be implemented with other frameworks, including NextJS and Marko.
I suspect we’re going to hear and see a lot more of Islands Architecture Pattern in the very near future as an alternative to Single Page Applications.