Hacker News new | ask | show | jobs
by toddmorey 1469 days ago
Frameworks like Next or Nuxt often render each page server-side, shipping HTML to the client, but then also send enough javascript and json data to the client to "hydrate" the page back into fully interactive components. The whole site, then, really acts as one large javascript app once fully loaded.

The islands approach is different: pages are server rendered, but you can easily define islands of interactivity (like, say, an auto-complete search bar) where just enough javascript is sent to make those components interactive—and only when it's needed. You can control at what point exactly each component is made interactive: as the page loads, when the component becomes visible, when the user first interacts, etc. It's a great way to balance performance and rich interactivity. If the user never scrolls down to your photo carousel at the bottom of the page, the javascript is never requested.

If this sounds like what we used to do with say PHP & JQuery, you're not wrong. The difference here is we have the same javascript-based template logic and component model both clientside and serverside.

Some other projects adopting the islands pattern: https://iles.pages.dev - https://astro.build - https://slinkity.dev

More reading: https://jasonformat.com/islands-architecture/

2 comments

The main dev on Slinkity has moved onto Astro. Just an fyi and yes Astro fan here. Mental model feels very productive.
Could solidjs considered also using the island architecture or at least considered a similar architecture?