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.
SPAs aren’t a silver bullet, however. There are several downsides to consider:
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.
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.
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.
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”.
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.
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?