Why You Should Use Islands Architecture

A peek into the future of frontend development

Dynamic JS islands in the middle of a static HTML sea. original source

In 2013, the Facebook-backed React barreled onto the web development scene and changed the way we render web applications. Instead of rendering pages on the server and shipping them to the client, developers could use React to create Single Page Applications (SPAs) and render them on the client side. As tools like React gained popularity, client rendered SPAs rapidly replaced their aging relative, the server-rendered Multi-Page Application.

This approach revolutionized modern frontend design. However, it wasn’t without performance pitfalls. Devious little bugs-as-features and bad practices snuck into the majority of new applications and grew worse as SPA frameworks like React, Vue, and Angular began to dominate the web.

SPAs overthrew the traditional server-rendered MPAs. source

In comes Islands Architecture, an idea coined by Etsy frontend architect Katie Sylor-Miller during a 2019 meeting. Islands Architecture utilizes both the server and client to render applications by loading static content into HTML on the server, but creating placeholders for interactive regions later hydrated with JavaScript by the client. As a developer, I’m…