#Basic fullstack code not working

1 messages · Page 1 of 1 (latest)

grand bear
#

I made a minimal example of code that "should" be working from my understanding, but isn't.
Here it is:

use dioxus::prelude::*;

fn main() {
    #[cfg(feature = "ssr")] {
        use dioxus_fullstack::prelude::*;

        tokio::runtime::Runtime::new()
            .unwrap()
            .block_on(async move {
                let app = axum::routing::Router::new()
                    .serve_dioxus_application(
                        "",
                        ServeConfigBuilder::new(App, ())
                    );

                let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 3000));
                println!("Listening on: {addr}");
                axum::Server::bind(&addr)
                    .serve(app.into_make_service())
                    .await
                    .unwrap();
        })
    }
}

#[component]
pub fn App(cx: Scope) -> Element {
    let count = use_state(cx, || vec![0, 1, 2, 3, 4]);
    render! {
        button {
            onclick: move |_| {
                count.make_mut().remove(0);
            },
            "ok {count[0]}"
        }
    }
}

When I launch this code, everything compiles but when I click on the button, it stays at "ok 0".

Why ?

Command used:

$ dx build --features web --release    

$ cargo run --features ssr --release
neon token
#

you are missing the client code

#

like, main won't do anything when the ssr feature is not enabled

#

therefore there wont be any hydration

#

Did you follow a guide?

grand bear
#

I think that my understanding on how the ssr works on dioxus is wrong.
The main function will be executed without the ssr flag even when Im running it with the --features ssr ?

neon token
#

Nono

#

I didn't mean that

#

the SSR will just generate some HTML, which is what you see in your browser

#

but in order to be interactive, you need to to also serve the client code (web)

#

But in this case

#

the client code (web feature) isn't running any code, that's why clicking won't do anything

# 
use dioxus::prelude::*;

fn main() {
    
}

#[component]
pub fn App(cx: Scope) -> Element {
    let count = use_state(cx, || vec![0, 1, 2, 3, 4]);
    render! {
        button {
            onclick: move |_| {
                count.make_mut().remove(0);
            },
            "ok {count[0]}"
        }
    }
}
#

This is the client code you are shipping

grand bear
#

Yes

neon token
#

as you see, the main function won't do anything

#

that's why it's not interactive

grand bear
#

Yeah, but for me ```rs
.serve_dioxus_application(
"",
ServeConfigBuilder::new(App, ())
);

was shipping the WASM with the HTML ?
neon token
#

one thing is serving

#

and another one is actually doing anything in the served code

grand bear
#

And how come that the back-end can know that the front-end needs that reactivty ?
Like I mean, the back-end is only running with the feature ssr right ?
So the feature web shouldn't do anything ? I just don't understand the part of, how can the web part is accessed

neon token
#

this mean the website will load pretty much instantly

#

whicl in behind the scenes

grand bear
neon token
#

it downloads the wasm binary that actually contains the logic

#

and runs it

#

the issue here, is that there is nothing to run under the web feature

grand bear
#

OHHHHHHH.
So basically, what is sent to the client is the same code that is used for the back-end and the client runs everything with the "web" flag ?

neon token
#

exactly!

grand bear
#

AHHHHHHHHHHHHHHHHHHH

#

took time to understand it

#

thanks!!!