Skip to content

CSR and Full Stack #5468

@sam-rusty

Description

@sam-rusty

Hi everyone! I'm trying to build a decoupled fullstack app sharing code between frontend and backend, but deployed separately:

Frontend: Pure CSR static files on Cloudflare Pages.

Backend: API/Server Functions on AWS ECS.

I adapted examples/07-fullstack/desktop for the web. When I build the frontend (dx bundle --web --release) and serve it statically (bunx serve .), it crashes in the browser:

Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

It's looking for window.initial_dioxus_hydration_data (SSR), but I'm serving a static HTML file so it evaluates to undefined.

Cargo.toml

[dependencies]
dioxus = { workspace = true, features = ["fullstack"] }
serde = { workspace = true }

[features]
server = ["dioxus/server"]
web = ["dioxus/web"]

main.rs

use dioxus::prelude::*;

fn main() {
    #[cfg(not(feature = "server"))]
    dioxus::fullstack::set_server_url("http://127.0.0.1:8080");
    dioxus::launch(app);
}

pub fn app() -> Element {
    let mut text = use_signal(|| "...".to_string());
    rsx! {
        button {
            onclick: move |_| async move {
                if let Ok(data) = get_server_data().await { text.set(data); }
            },
            "Run server function"
        }
    }
}

#[get("/api/data")]
async fn get_server_data() -> ServerFnResult<String> {
    Ok("Hello!".to_string())
}

Question:
How do I configure the Dioxus CLI to build a pure CSR client that doesn't expect SSR hydration data, while keeping the fullstack feature enabled so #[server] macros and client fetches still work? Any guidance would be hugely appreciated!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions