Islands that client-side-render only instead of hydrating?

[lnay]

Q: Is it currently possible to not server-side render the contents of an #[island], just client-side render to avoid hydration (and potential mismatches)?

Context

I'm currently having trouble migrating an app from 0.6 to 0.7 due to multiple reasons which I'm slowly narrowing down on.

But one of these issues is a whackamole of hydration errors. I believe this section of the book discusses the underlying issue I have because I'm being very liberal embedding html inside mathml and vice versa to produce a UI which looks and behaves correctly in major browsers despite not being standard compliant.

[gbj]

Sure! Here's an example of a client-only island. (Or a client-only anything to be honest. The trick is that an Effect only runs on the client, and that it runs after hydration, so you can mutate a signal in an Effect and use it to say "only show this on the client.")

#[island]
pub fn ClientOnlyIsland() -> impl IntoView {
    let render = RwSignal::new(false);
    Effect::new(move |_| render.set(true));
    move || {
        render.get().then(|| {
            view! {
                <h2>"Client-Only Island"</h2>
            }
        })
    }
}

[gbj]

Although to add a second answer 😄

looks and behaves correctly in major browsers despite not being standard compliant

Whether it's standard compliant or not isn't actually relevant, per se — What matters is whether the browser renders the DOM elements in the same order that you wrote them. (Which it often doesn't for nonstandard things.)

So if it looks and feels right in the browser, you can use the DOM inspector to see how the browser arranges the elements and then arrange them that way in your application and it should be fine, if that's the issue.