Overview
Astro's philosophy is centered around not using JavaScript, but it may happen in some situations that you need to use it to give interactivity to certain elements of the page.
In this article we will see what Astro Islands are and how they work.
Let's start! 🤙
What are Astro Islands?
In Astro, an "island" refers to any interactive user interface component on the page. An island can be thought of as an interactive widget floating in a sea of otherwise static, lightweight, server-rendered HTML.
An island always runs alone from the other islands on the page, in which multiple islands can exist. Islands can share statehood with each other.
Unlike SPAs that load all client-side JavaScript, Astro Islands use a technique also known as partial or selective hydration.
Astro support multiple frontend frameworks for create the islands like Vue, React, Preact, Svelte and SolidJS.
How to create and Island
By default, Astro render the component without JavaScript, only HTML and CSS:
<RandomVueComponent />
To make a component interactive, you need a client directive:*. Astro then automatically creates and bundles your client-side JavaScript for optimized performance.
<RandomVueComponent client:load />
Benefits
The main advantage of the Astro Islands is performance: Astro render static HTML and JavaScript is only loaded for the individual components that need it.
Another benefit is parallel loading: if there are multiple islands on the page, no islands block the loading of the others but they will be loaded in parallel (and when necessary).
Conclusion
Astro Islands are isolated pieces of code that provide interactivity to an Astro page.
Major frontend frameworks such as Vue and React are supported. This type of approach provides greater performance without affecting the user experience. Make good use of it!
Happy coding!✨
Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻
Linktree: https://linktr.ee/domenicotenace
Follow me on dev.to for other articles 👇🏻
If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹
Top comments (3)
I haven't built anything with Astro yet but I am intrigued. The thing that strikes me about it though and made me laugh when I first read up on it is how everything old is new again.
Astro really seems like the old web for a new age. Static HTML with 'islands of Javascript' is just the way everything on the web used to be 20 years ago. I'm glad to see that no everyone thinks that every site needs to be an app.
Plus ça change, plus c'est la même chose.
Hi Luke, I hope for you that you will try Astro because it is really worth it. As for your observation, I think it is correct: it seems that the web is going back to how it was in its origins (I was also reading about Next that is moving to a similar approach to PHP?). The explanation I give myself is that before there was not as much complexity as there is now.
I think what we're seeing right now is a split in two directions (at least), driven by dissatisfaction with the status quo but different ideas about how to change it.
Technologies like Astro are re-embracing the server-side, static-by-default content models of Web 1.0, but with a new focus on developer convenience and composability / code reuse. At the other extreme, I've seen major websites (National Geographic, I think, was the most recent) built around a zero-HTML server model, where the site's entire content is served exclusively as JSON objects. All page rendering is done in a client-side service worker!