Islands Architecture #3861
Replies: 3 comments 3 replies
-
If you move the interactivity of your UI outside the React components used to render React server-side, you could then load your own client-side JS code from the public folder only on the route you need them. This way you can add interactivity only for the parts you need. |
Beta Was this translation helpful? Give feedback.
-
Full disclosure: I haven't found the time to toy around with this yet at all, it's just a tab that's been sitting there for a while. That being said, Podium looks like it might be the thing you're looking for |
Beta Was this translation helpful? Give feedback.
-
With Vite under the hood now, this seems like it could be a real option. |
Beta Was this translation helpful? Give feedback.
-
What is the Islands Architecture?
The idea of islands (currently used by some SSR frameworks like Astro and Fresh). When using the islands architecture/pattern, the server takes care of only rendering and sending plain HTML, while the client takes charge of hydrating the island component.
Take the following image as an example:
On the above image, the
Sidebar
,Header
, andImage Carousel
components are parts of the application that needs to be interactive, but not immediately, only after the code for them is loaded.How can this work with Remix?
Currently, the only way to decide whether to render - or not render at all - the
<script />
tags pointing to the routechunks
, is to render or not render the<Scripts />
component exported by@remix-run/react
.My idea/proposal (although I haven't dug that much into the Remix compiler) is to support the inclusion of
*.island.tsx?
files. This way, it could try to create a dependency graph, extract chunks of shared code into modules and add the definitions to theremixManifest
.Again, I haven't dug that deep into how the compiler, or module resolution works, but if this gets merged into Remix, then it could evolve to eventually deprecate the
<Scripts />
tag, and always sending zero JavaScript to the client, unless an island import is detected.Beta Was this translation helpful? Give feedback.
All reactions