dioxus icon indicating copy to clipboard operation
dioxus copied to clipboard

Hydration error when using use_server_future in certain contexts in Fullstack

Open DonAlonzo opened this issue 1 year ago • 0 comments

Problem

In Fullstack, use_server_function results in hydration errors in certain contexts.

Steps To Reproduce

Steps to reproduce the behavior:

main.rs

#[cfg(feature = "server")]
use axum::Router;
use dioxus::prelude::*;

fn main() {
    #[cfg(feature = "web")]
    {
        dioxus::web::launch::launch_cfg(App, dioxus::web::Config::new().hydrate(true));
    }

    #[cfg(feature = "server")]
    tokio::runtime::Builder::new_multi_thread()
        .enable_all()
        .build()
        .unwrap()
        .block_on(async {
            let app = Router::new()
                .serve_dioxus_application(ServeConfig::builder().build(), || VirtualDom::new(App)).await
                .into_make_service();
            
            use std::net::{IpAddr, Ipv4Addr, SocketAddr};
            let listen_address = SocketAddr::new(IpAddr::V4(Ipv4Addr::new(0, 0, 0, 0)), 8080);
            let listener = tokio::net::TcpListener::bind(listen_address).await.unwrap();
            axum::serve(listener, app).await.unwrap();
        });
}

#[server]
pub async fn get_greeting() -> Result<String, ServerFnError> {
    tokio::time::sleep(tokio::time::Duration::from_millis(10)).await;
    Ok("Hello world".into())
}

#[component]
pub fn App() -> Element {
    rsx! {
        Child1 {
        }
        Child2 {
        }
    }
}

#[component]
pub fn Child1() -> Element {
    let greeting = use_server_future(get_greeting)?()?.throw()?;
    rsx! {
        h1 {
            "{greeting}",
        }
    }
}

#[component]
fn Child2() -> Element {
    let _number = use_server_future(move || async move { Ok::<i32, ServerFnError>(1) })?()?.throw()?;
    rsx! {
        button {
            onclick: move |_| {},
            "click"
        }
    }
}

Cargo.toml

[package]
name = "hydration-error"
edition = "2021"
version = "0.1.0"

[dependencies]
axum = { version = "0.7.4", optional = true }
dioxus = { git = "https://github.com/dioxuslabs/dioxus", ref = "74352f2f", features = ["fullstack", "router"] }
tokio = { version = "1.36.0", features = ["full"], optional = true }

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

Expected behavior

The hydration error should not appear.

Screenshots

image

Environment:

  • Dioxus version: master
  • Rust version: 1.77
  • OS info: Arch Linux
  • App platform: fullstack

Questionnaire

  • [X] I'm interested in fixing this myself but don't know where to start
  • [ ] I would like to fix and I have a solution
  • [ ] I don't have time to fix this right now, but maybe later

DonAlonzo avatar May 04 '24 22:05 DonAlonzo