Islands Architecture support

[JamyGolden]

Hello, I was wondering if there are any plans to add native support for Islands Architecture to React Router. If you're not familiar, here's a quick overview:

Islands architecture is a pioneering approach to web development that aims to enhance performance by combining concepts from server-side rendering, static site generation, and partial hydration. It encourages small, focused chunks of interactivity within server-rendered web pages. This involves multiple entry points for applications and independent delivery of interactive "islands" on top of static HTML. Rather than loading an entire JavaScript bundle, it optimizes the rehydration process by only shipping necessary JavaScript for specific interactive components or "islands". This results in faster page loading times and improved user experience. The concept, though still emerging, is supported by various frameworks like Astro and Marko which contribute to its growing popularity in the field of web development.

More info here: https://www.sanity.io/glossary/islands-architecture

I'm currently building a React Router 7 app. While the hydration model works well, it would be great to have granular control over which components are hydrated. Native support for Islands-style hydration would open up new optimisation possibilities.

I found this discussion that mentions Islands Architecture, but only in the context of manually building such a system on top of React Router.

Is this something you'd be open to exploring in a future React Router version?

[sergiodxa]

have granular control over which components are hydrated

This is what RSC adds (only "use client" components are hydrated)

---

I don't think islands architecture works with RR, because the router needs to control the whole page, where with islands you send HTML from the server and hydrate individual components, but the router needs to hydrate everything so it can update the UI.

With RSC this will be possible as only React, the router and client components will by send to the browser, while React and RR can still control everything.

[JamyGolden]

Ah yes, I forgot to specify I meant SSR react-router only for Islands Architecture support. Great 'use client' fills the exact function I was interested in. What is the status on RSC in RR?

[sergiodxa]

WIP, there's no ETA

[sergiodxa]

If you want to use RR only for SSR without using the router client-side, you can use islands yourself by sending the bundled JS code for your islands

But I would rather use another framework in that case

[JamyGolden]

Ok 👍 thanks for your replies.