Science & Technology

What is Island Architecture? Does it even matter?

by James Perkins

📚 Main topics

The problem with shipping JavaScriptIn a typical React, Vue, or Svelte application, even static components may ship JavaScript they do not need. Interactive sections may also load code before a visitor reaches them. 0:00
How island architecture worksStatic content can be delivered without client-side JavaScript, while interactive components load and hydrate only when needed—for example, when they enter the viewport. 1:32
Astro directives in practiceThe video contrasts a static Hero component with an interactive button using client:visible. Astro also offers client:load and client:idle for different hydration timings. 2:33
Seeing the component loadIn the demo, the page starts with no client-side code running. Scrolling down triggers the button component’s JavaScript to load and hydrate, which is also shown by a console log. 4:11

✨ Key takeaways

Ship JavaScript selectivelyIsland architecture helps avoid loading JavaScript for static content and delays code for interactive components until it is useful. 1:01
Choose hydration timingAstro’s client directives let developers control whether a component loads immediately, when the browser is idle, or when it becomes visible. 3:37

🧠 Lessons learned

Not every component needs client-side codeStatic text, images, and layout can be rendered without JavaScript, while interactive components can remain functional through selective loading. 3:04

🏁 Conclusion/next steps

Explore island architecture frameworksThe video names Astro, Capri, and Fresh as frameworks that support this approach, and encourages viewers to share what Jamstack topics they want to see next. 2:03 5:14

What is Island Architecture Jamstack island architecture astro island architecture fresh island architecutre island architecture tutorial island architecture island architecture explainer astro.build fresh freshjs fresh deno capri.build ship no js

Transcript excerpt

0:00 So you may have heard of this new the term, what is Island Architecture? Is island architecture in the jamstack world. When you ship your latest application using your favorite framework, whether that be React, Vue or Svelte, each of those components contains JavaScript. Even if it's a static file such as a nav or just an image with some text, this is where Island Architecture

0:31 comes. What? What? What? What is island architecture? Control the JavaScript that is shipped with your project and how that also interacts with your users. Let's look at a normal React application in the jamstack world. Here is a diagram of a website. As you can see, there is a top section here with a bio portfolio, podcast and blog. And that would be our NAV bar. Then we have this section here, which is our

1:01 Hero. And below the fold is an image section that is interactive. So it's like an image carousel, something like that. Currently all of this is being shipped with JavaScript. So maybe this top section has 10 KB. This section is 20, our carousel is another 17. But this section here and this section here is completely static. The components aren't actually doing anything, they're not taking any state in

🔒 The full, searchable transcript is available with Pro.

Suggestions