Have you heard about Islands of Interactivity before?
Islands of interactivity is a great pattern more frameworks should be using....
Hi there, it’s me again!
I know, it’s been a while, but to be honest, I haven’t sent any emails lately because I didn’t know what to write to you about. I don’t want to spam your email just for the sake of spamming it, I want to share useful content, so I’ve been holding out.
If you do have any topics you’d like me to write about, reply to this post with the topics, and I’ll make sure to tackle them in future emails.
With that out of the way, let me tell you about the book raffle. I’ve already communicated with and sent all physical copies of my newest book, “Skills of a Successful Software Engineer” to everyone who won AND answered my emails. So check your SPAM in case you have a pending email from me.
Some of these will take a few weeks to get there, so sit tight, it’s on its way!
Now, let’s move on to discussing islands.
What are Islands of Interactivity?
It is actually an architectural pattern used by some full-stack frameworks. In particular, a very recently announced one: Fresh.
Fresh Deno’s team response to the likes of Next.js and Nuxt. It’s a full-stack framework (meaning you can do the whole thing, back-end and front-end without having to add anything else) that they’ve recently made public.
Mind you, Fresh is not the first one to take advantage of this pattern, Astro and MarkoJS. That said, there aren’t a lot more frameworks currently using this pattern, since it’s not yet been turned into mainstream.
The islands architecture consists in treating every single bit of non-interactive content as static, server-side rendered, and only the interactive bits will be sent back to the client for hydration.
To put an example, we can probably consider 99% of the content of a blog to be static. We could add things like social media buttons, comments, and the ability to “like” articles. Those small bits do require JavaScript and provide interactivity to the user. But the rest? The content, categories, and even the pagination can be static and server-side rendered. So if that’s the case, why would you want to send all the JS needed to hydrate every single component on the client, when you could simply hydrate the few small ones that actually need it?
That’s the question this architecture is trying to answer.
Long story short: you don’t, you simply send the static HTML back to the client, and let the individual components that do need interactivity, hydrate themselves. The JS required to do that much less and requires a lot less processing (thus, reducing the “cost” of the JavaScript shipped). These components also can be hydrated individually and asynchronously, thus allowing for a much better user experience overall.
Using the islands
These islands are nothing more than components that are treated differently by the framework. But you can use them exactly like you would with any other static component.
The only difference is that when the SSR happens, a placeholder is left in place for the island. Once it reaches the client, that placeholder will trigger the island’s hydration process.
To give you an example taken from Fresh’s documentation, if you had a Countdown button that is acting as an island, you would simply use it like this:
// routes/countdown.tsx
/** @jsx h */
import { h } from "preact";
import Countdown from "../islands/Countdown.tsx";
export default function Page() {
const date = new Date();
date.setHours(date.getHours() + 1);
return (
<p>
The big event is happening <Countdown target={date.toISOString()} />.
</p>
);
}Nothing changes. The framework uses Preact instead of React because among many of its features, it’s a lot lighter than the latter, so it’s a great choice when you’re building something that tries to minimize the shipped JS overall.
I won’t keep going, because this was meant to be a quick overview of the pattern, but I highly encourage you to check out Fresh, or if you’re not ready to switch to Deno, maybe check out Astro or MarkoJS and see if you can take advantage of this pattern.
Leave a comment if you’ve used any of these products before and how has your experience been so far!