diff --git a/docs/guide/examples/hydration_props.rs b/docs/guide/examples/hydration_props.rs new file mode 100644 index 000000000..4ab4e795f --- /dev/null +++ b/docs/guide/examples/hydration_props.rs @@ -0,0 +1,35 @@ +#![allow(non_snake_case, unused)] +use dioxus::prelude::*; + +fn main() { + #[cfg(feature = "web")] + dioxus_web::launch_cfg(app, dioxus_web::Config::new().hydrate(true)); + #[cfg(feature = "ssr")] + { + use dioxus_fullstack::prelude::*; + tokio::runtime::Runtime::new() + .unwrap() + .block_on(async move { + let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080)); + axum::Server::bind(&addr) + .serve( + axum::Router::new() + .connect_hot_reloading() + .serve_dioxus_application("", ServeConfigBuilder::new(app, ())) + .into_make_service(), + ) + .await + .unwrap(); + }); + } +} + +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); + + cx.render(rsx! { + h1 { "High-Five counter: {count}" } + button { onclick: move |_| count += 1, "Up high!" } + button { onclick: move |_| count -= 1, "Down low!" } + }) +} diff --git a/docs/guide/src/en/getting_started/fullstack.md b/docs/guide/src/en/getting_started/fullstack.md index acaaefbb9..00deeb45f 100644 --- a/docs/guide/src/en/getting_started/fullstack.md +++ b/docs/guide/src/en/getting_started/fullstack.md @@ -82,6 +82,10 @@ Next, we need to modify our `main.rs` to use either hydrate on the client or ren Now, build your client-side bundle with `dioxus build --features web` and run your server with `cargo run --features ssr`. You should see the same page as before, but now you can interact with the buttons! +## Sycronizing props between the server and client + +Lets make the initial count of the counter dynamic based on the current page. + ## Communicating with the server `dixous-server` provides server functions that allow you to call an automatically generated API on the server from the client as if it were a local function. diff --git a/packages/fullstack/src/render.rs b/packages/fullstack/src/render.rs index a05a63801..b56016d5e 100644 --- a/packages/fullstack/src/render.rs +++ b/packages/fullstack/src/render.rs @@ -79,7 +79,6 @@ impl SSRState { // on initial page load connect to the disconnect ws const ws = new WebSocket(url); // if we disconnect, start polling - ws.onmessage = (m) => {console.log(m)}; ws.onclose = reload_upon_connect; })()"#;