Allow the client to cause server islands to be reloaded

[vintagedave]

Body

Summary

Server-rendered content is fantastic. Let's make it able to be updated, without reloading the entire page, enabling more SPA-style apps without pulling in third party libraries.

Background & Motivation

I'm finding my goal difficult in Astro and it may be that others are too.

My app gives a list of data (in my case, listing a user's API keys). This is generated in deferred a server island, which is perfect: I can use an Astro component for the list, another component for each item, it's all serverside rendered and there's no need to bring in a complex UI library. The page is loaded and because it's a deferred island, the content is displayed a moment later.

Another component is a HTML form to edit a key's name, and this form is generated serverside too, and hidden by default. There is minimal Javascript to show/hide the rename form for each key, and to call an Astro server action to rename one.

But. Once renamed, the new name has to be updated in the list.

What has to happen today:

• A UI framework (eg React) and probably client islands, to regenerate the UI content, or
• Some old-school JS to find the element and update its contents, or
• Refreshing the whole page, just to regenerate the only part that's changed, the contents of serverside island.

What I'd love:

• "Astro, please regenerate the server island this component is located inside" -> that segment of the page is replaced.

Here, I'm a little inspired by HTMX and how it can replace small segments of content for serverside rendering of interactive content.

The island is alreaduy deferred and loads a moment after the page itself. I've asked myself, why only once? Why not two times, or more?

Goals

• Allow a serverside island to be refreshed without refreshing the entire page
• Thematically / ideologically, allow more interactive content without requiring a third party UI framework, and aim for more work able to be performed serverside instead of clientside

Example

I'm not tied to any specific solution. One way might be to send an event. Completely pseudocode:

document.dispatchEvent(new Event(astro:regenerate-island));

For my current use case, reloading the island a specific component is in is enough. It's possible that for other use cases, it would be useful to cause other islands to be reloaded too.

[vintagedave]

By the way, I asked about regenerating server island content in the Discord and was kindly suggested to propose it as a feature. I hope the above describes the use case and behaviour well enough, and please let me know if I can improve it. Cheers!

[ascorbic]

I like this. If this was to happen, I'd also want the event to be able to pass arguments to the island. It would be nice if there was a way for the island to refresh itself. If the dispatchEvent method were to work, it would need a way to specify which island was being targeted, maybe with an id or something. This could be done by letting an island know its own id. Combined, this would allow islands to define forms that target themselves.

[rawrmonstar]

This would be incredibly useful, especially with Astro session API. I can imagine changing some session data and wanting to rerender something with the new session data without having to introduce redundant client-side code.