Search
Islands architecture or 'partial hydration' is an approach that gives the fast-loading nature of a purely static website, paired with the dynamic iterations you get from an SPA. To understand why islands architecture is such as big deal, we need a brief internet history lesson.
As JavaScript grew more powerful in the early 2000s, we could suddenly push browsers to do more. Instead of loading an entirely new page for each request, we could use JavaScript to rewrite the existing page to make it feel more like a native application. This idea is called Single Page Applications, or SPAs, and expanded the possibilities of what a website could be. They created a wave of moving desktop software into the browser including Gmail, Google Docs, and Netflix.
SPAs aren't a silver bullet, however. There are several downsides to consider:
To mitigate points 2 & 3, frameworks like Gatsby, Next.js, Nuxt.js, and Gridsome prerendered the JavaScript components into HTML and hydrated them on page load. They work like this:
It's a middle ground where you quickly get a static version of the site while your large JavaScript framework downloads and runs. It's better but not perfect. You're still loading and processing a large JavaScript file, albeit at a more convenient time.
For many websites, full hydration is overkill. There may only be a handful of components that need interaction. This is the fundamental idea behind partial hydration, and it works something like this:
The islands era sees a number of SSGs bringing the advantages of partial hydration to reality.
First released in 2020 by Nick Reese
Nick Reese is the co-founder of Elder Guide — a website to find and compare senior living options. Over the past 14 years, Nick has managed five major SEO properties, so the benefits of Jamstack are highly tangible to him.
When he started Elder Guide, he evaluated six SSGs: Gatsby, Next.js, Nuxt.js, 11ty, Sapper, and Hydrogen.js. Unfortunately, none of these ticked all of his requirements.
Nick had three realizations:
He whipped up a rudimentary prototype based on Svelte, named it Elder.js, and started using it to power Elder Guide.
Elder.js was one of the first SSGs to pioneer partial hydration or islands architecture and is currently "stable and production-ready". Nick has executed his vision of what he wanted in an SSG and has rolled it out over a couple of the websites he manages. Now his roadmap is about working on bug fixes and incremental changes that are primarily under the hood.
First released in 2020 by Rich Harris
After years of working on Sapper, Rich Harris and the Svelte team reflected on the state of the project and had a few realizations:
These ideas led Rich and the Svelte team to build a new Svelte-based application framework from scratch, SvelteKit. The framework addresses the shortcomings of Sapper including:
SvelteKit is actively working towards its 1.0, where it will have stable APIs ready for production use. It's a framework that addresses the tradeoffs between having a simple document web page versus a single page application. The icing on the cake will be if Svelte can add an elegant solution for partial hydration.
Get started with SvelteKit on CloudCannon.
First released in 2021 by Fred K. Schott
"There's a simple secret to building a faster website — just ship less." Frameworks like React have normalized shipping hundreds of kb of JavaScript. The choice to use a JavaScript framework involves considering some tradeoffs. How much interactivity do I need? Is it worth the overhead of downloading an entire web framework? Would I be better off using simple HTML, CSS, and vanilla JavaScript?
The team of open source developers behind Snowpack had been pondering these questions and saw an opportunity to create a new SSG, Astro.
Astro "borrowed the best parts of our favorite tools and then added a few innovations of our own".
With Astro, you can bring your own JavaScript framework, including React, Svelte, Vue, Preact, web components, or vanilla HTML & JavaScript. On build, Astro renders the entire website to completely static HTML. Static HTML means the pages load extremely quickly with no JavaScript overhead. When you do need interactive JavaScript on a component, Astro loads just that one component. It's partial hydration or islands architecture like Elder.js. On top of that, Astro has SEO features such as automatic site maps, RSS feeds, pagination, and collections to help ensure your site ranks well.
The combination of bringing your own JavaScript framework with partial hydration created tremendous hype in the community. Astro is still in beta and has already amassed a large following of 8k+ stars on GitHub, as well as taking out the 2021 Jammies Ecosystem Innovation Award. It's certainly one to watch in the future.
First released in 2021 by Ben Holmes
If there were an award for best SSG launch video, Ben's Slinkity announcement would get my vote. Slinkity isn't an SSG in its own right. It's a plugin that extends 11ty to bring React, Vue, or Svelte magic to your static website.
At a high level, there are two types of static site generators:
Slinkity is part of the new wave. Along with Astro and Elder.js, these SSGs are trying to find a middle ground between the above two extremes. Where Slinkity separates itself is instead of being a standalone framework, it's bolted onto 11ty. This integration is a major bonus as it means you can start building your website using 11ty, which has a low learning curve, then when you need more dynamic interactions, you're free to layer on React, Vue, or Svelte where you need it.
You have complete control over how components partially hydrate in Slinkity. By default, they render 'eager', which means they're hydrated as soon as the page loads. You can also render them 'lazy', which is the same except the component only loads when it's scrolled into view. Finally, you can render them 'static', which means no JavaScript and no interactivity.
11ty + Slinkity is an exciting duo, I'm looking forward to see where Ben takes it. Slinkity is currently in early alpha, so probably isn't much just in production yet, but hopefully soon.
This brings us to the end of this series (for now). The history of SSGs has been a constant journey of adding new ideas, then reinventing it in simpler or more powerful ways. The future of SSGs isn’t heading in single direction; instead we have a four-headed hydra:
Which direction will win? Well, all of them! Each direction has its own benefits and tradeoffs that make sense for particular use cases. The SSG hydra now has full coverage of the web development gamut from a simple company website to a full blown application.
As for what comes next, I think we’re already starting to see it — iterations and new SSGs that address downsides of current SSGs. Namely:
Momentum and innovation is accelerating in the world of static site generators. What do you think will be the biggest developments in the coming years?
SSGs through the ages
Give your content team full autonomy on your developer-approved tech stack with CloudCannon.