Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydration error when using use_server_future in certain contexts in Fullstack #2389

Open
1 of 3 tasks
DonAlonzo opened this issue May 4, 2024 · 0 comments
Open
1 of 3 tasks

Comments

@DonAlonzo
Copy link
Contributor

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

  • 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant