Don't understand why fullstack app does run multiple times

[ThomasCartier]

Hi,
Here is the simplified code:

fn main() {

        launch(App);
}

fn loader<T>(fn_call: T) -> Vec<Language>
where
        T: FnOnce() -> Vec<Language>
{

        fn_call()
}

fn App() -> Element {

        #[cfg(feature = "server")]
        {

                println!("FROM SERVER")
        }

        #[cfg(feature = "web")]
        {

                println!("FROM WEB")
        }

        let prepare = move || -> Vec<Language> {

                let concat_res = ...
                // concatenating the i18 values into one big Language

                concat_res
        };

        let res = loader(prepare);

        use_init_i18n("fr-FR".parse().unwrap(), "en-US".parse().unwrap(), || {

                res
        });

        rsx! {
                Router::<Route> {}
        }
}

Ok, my goal is to have a fullstack app.
Excerpt of my cargo.toml:

[dependencies]
serde = { version = "1.0.197", features = ["derive"] }
dioxus = { version = "0.5", features = ["fullstack", "router"] }

# Debug
dioxus-logger = "0.5.0"
getrandom = { version = "0.2.15", features = ["js"] }
serde_json = "1.0.117"
unic-langid = { version = "0.9.5", features = ["serde"] }

[target.'cfg(target_arch = "x86_64")'.dependencies]
dioxus-std = { version = "0.5.0", features = ["i18n"] }

[target.'cfg(target_arch = "wasm32")'.dependencies]
dioxus-std = { version = "0.5.0", features = ["geolocation", "i18n"] }

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

[profile.release]
opt-level = 3
debug = false
lto = true
codegen-units = 1
panic = "abort"
strip = true
incremental = false

Now, I start it with dx serve --platform fullstack.
Does the same as dx serve.

But my issue is that the code seems to run multiple times the App component.
Running the above will print "FROM SERVER" multiple times and it causes issues down the line with evals and so on panicking

 thread 'tokio-runtime-worker' panicked at /home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/dioxus-html-0.5.1/src/eval.rs:101:24:
called `Result::unwrap()` on an `Err` value: Dropped(ValueDroppedError { created_at: Location { file: "/home/user/.cargo/registry/src/index.crates.io-6f17d22bba15001f/dioxus-html-0.5.1/src/eval.rs", line: 58, col: 44 } })

because the code is run twice or more ?

the fullstack axum router example doesn't compile and

let cfg = server_only!(dioxus::fullstack::Config::new().incremental(
        IncrementalRendererConfig::default().invalidate_after(std::time::Duration::from_secs(120)),
    ));

    LaunchBuilder::fullstack().with_cfg(cfg).launch(app);

tells that cfg is ().

So, how to do it properly ? I don't understand what I should do at this point.

Thanks guys

[ThomasCartier]

The project have been created using dx new, optionfullstack, as an extra info

[ealmloff]

Durring SSR, fullstack may run a component multiple times because of suspense. If there is a suspended future in your app (created by suspend or use_server_future), dioxus reruns any dirty scopes after the future has resolved before it sends the HTML to the client.

Running the above will print "FROM SERVER" multiple times and it causes issues down the line with evals and so on panicking

The eval doesn't do anything on the server. If possible, you should just never run eval on the server. Where is your eval running? Effects are generally a good place to put evals that should run once per component. Effects will automatically not be run on the server

[ThomasCartier]

@ealmloff It should not be run on the server, please find the code:

fn eval_string2() -> String {

        r#"
        // You can send messages from JavaScript to Rust with the dioxus.send function
        dioxus.send("Hi from JS!");
        // You can receive messages from Rust to JavaScript with the dioxus.recv function
        let msg = await dioxus.recv();
        console.log(msg);
        "#
        .into()
}

#[component]

pub fn GraphModule(graph_type: GraphType, graph_title: String, graph_axis_label: Vec<String>, values: Vec<GraphElements>, anchor_name: String) -> Element {

        let graph_type = match graph_type {
                GraphType::Bar => "bar",
                GraphType::Line => "line",
                GraphType::Pie => "pie",
                GraphType::Radar => "radar",
                GraphType::Doughnut => "doughnut"
        };

        let seri = DataToGraph {
                graph_type: graph_type.to_owned(),
                graph_title,
                graph_axis_label,
                elements: values,
                anchor_name: anchor_name.clone()
        };

        if let Ok(out) = serde_json::to_string(&seri) {

                let jj = eval_string2();

                let eval = eval(&jj);

                println!("Out is {}", out);

                match eval.send(out) {
                        Ok(_) => {

                                let future = use_resource(move || {

                                        to_owned![eval];

                                        async move {

                                                // You can receive any message from JavaScript with the recv method
                                                eval.recv().await.unwrap()
                                        }
                                });

                                match future.read_unchecked().as_ref() {
                                        Some(v) => {

                                                rsx! {
                                                        p { "{v}" }
                                                }
                                        }
                                        _ => {

                                                rsx! {
                                                        p { "hello" }
                                                }
                                        }
                                }

                     
                        }
                        Err(_) => {

                                return None;
                        }
                }
        } else {

                return None;
        }
}

BUT: I wanted to separate some components in their own directories, which are different crates altogether.
The code above is coming from one of those crates.

I will try to put it directly in the project and see what is going on. I will report in a few minutes.

[ThomasCartier]

@ealmloff So, regrouping everything lead to the same issue.
I decided to go the other way around.

Removing all my dependencies, and just having:

use dioxus::prelude::*;

fn main() {

        launch(App);
}

fn App() -> Element {

        println!("HELLO");

        rsx! {
                p { "OK" }
        }
}

No suspend or use_server_future. Nothing. Chromium with 0 extension (just in case).
Hello prints 4 times.

running with dx serve --platform fullstack.

when running with dx build --platform web && cargo run --features server, same thing occurs.

[ThomasCartier]

Something is fishy. I restarted my computer and now it only print once.
There is a code misbehaving somewhere.

I will dig.

[ThomasCartier]

Found out!

Chromium dev tool open leads to some unwanted reloads.

So I can close this issue and keep a note for future reference.

@ealmloff thanks for your help!