Hydration Mismatch with wasm-split + SSR: Route component renders twice (duplication)

[dolto]

I am experimenting with the wasm-split feature in Dioxus 0.7 combined with SSR. I've noticed that when a route is split, the content renders twice on the initial load: once from the server (SSR) and once appended by the client after the chunk is loaded.

// Cargo.toml
// dioxus = { version = "0.7.3", features = ["router", "fullstack", "wasm-split"] }

use dioxus::prelude::*;

#[derive(Clone, Routable, Debug, PartialEq)]
enum BlogRoute {
    #[route("/")]
    Home,
}

#[component]
// Based on the output, it seems this is automatically split into a separate wasm chunk.
pub fn Home() -> Element {
    rsx! {
        h1 { "Route Split? Why is this duplicated?" }
    }
}

dx command

dx serve --web --addr "0.0.0.0" --port 3000 --wasm-split

If I remove "--wasm-split", it renders fine.

Is this the expected behavior for wasm-split with SSR currently? It seems the hydration logic does not wait for the split chunk to resolve before attempting to hydrate, leading to this duplication. Is there a way to force the client to wait or properly match the server-rendered content when using automatic route splitting?

[sunnypatell]

@dolto this is a confirmed bug tracked in #4631. wasm-split + fullstack SSR has never been tested together (the test harness at packages/playwright-tests/wasm-split-harness is client-only, no fullstack features).

root cause: the server and client see split components differently during hydration.

on the server (not wasm32), the maybe_wasm_split! macro in config-macros/src/lib.rs takes the else branch and renders the component synchronously. your full Home HTML is in the SSR response.

on the client (wasm32), the router macro wraps the component in a LazyLoader that calls use_resource(|| async { MODULE.load().await }).suspend(). during the initial virtual_dom.rebuild() with skip_mutations = true, the route suspends because the WASM chunk hasn't loaded yet.

so the client's VDOM has a suspended placeholder where the server has full content. the hydration node mapping is misaligned. once the chunk loads and skip_mutations goes back to false, the resolved component creates new DOM nodes via the normal mutation path, but the original server-rendered nodes were never claimed/removed by the hydration system. result: two copies.

the streaming hydration path (rehydrate_streaming_inner in web/src/hydration/hydrate.rs) was designed for server-side suspense boundaries, not client-only suspension, so it never activates for split components.

workaround: remove --wasm-split when using fullstack/SSR. this is the only reliable option right now. without the flag, both server and client render synchronously and hydration matches correctly.

you can also wrap a SuspenseBoundary around your Outlet to at least contain the mismatch to a smaller subtree, but it won't fully prevent duplication:

rsx! {
    SuspenseBoundary {
        fallback: |_| rsx! { "loading..." },
        Outlet::<BlogRoute> {}
    }
}

ref: #4631 (same bug) | wasm-split PR #3683 | #5062 (wasm-split issues in 0.7)

[dolto]

Thank you for the detailed explanation and the root cause analysis.

It is great to know that this is a confirmed bug and is actively being tracked. Knowing the exact cause gives me confidence that it will be resolved in the future.

Thanks again!