dioxus
dioxus copied to clipboard
Hydration error when using use_server_future in certain contexts in Fullstack
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
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