Scaling performance-sensitive pages with the “islands” architecture

According to the is-land library documentation (https://github.com/11ty/is-land), is-land is “A new performance-focused way to add interactive client-side components to your web site. Or, more technically: a framework independent partial hydration islands architecture implementation.”

Let’s start by looking at what a “islands architecture” is. The islands architecture is a paradigm where a page is mainly server-rendered, and interactivity is added specifically where necessary. This reduces the page load time, as well as the amount of JavaScript being delivered (JavaScript is only delivered for specific client-side interactions). This is in contrast to situations where a JavaScript application “takes over” the full page – for example, in a Next.js app, where the client-side JavaScript will remount what’s been server-rendered, meaning the...