dioxus/docs/guide/examples/hydration_props.rs

75 lines
3.1 KiB
Rust
Raw Normal View History

2023-05-02 16:06:54 +00:00
#![allow(non_snake_case, unused)]
use dioxus::prelude::*;
2023-05-02 22:43:07 +00:00
use dioxus_fullstack::prelude::*;
2023-05-02 16:06:54 +00:00
fn main() {
#[cfg(feature = "web")]
2023-05-02 22:43:07 +00:00
dioxus_web::launch_with_props(
app,
// Get the root props from the document
get_root_props_from_document().unwrap_or_default(),
dioxus_web::Config::new().hydrate(true),
);
2023-05-02 16:06:54 +00:00
#[cfg(feature = "ssr")]
{
2023-05-02 22:43:07 +00:00
use axum::extract::Path;
use axum::extract::State;
use axum::routing::get;
2023-05-02 16:06:54 +00:00
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()
2023-05-02 22:43:07 +00:00
// Serve the dist folder with the static javascript and WASM files created by the dixous CLI
.serve_static_assets("./dist")
// Register server functions
.register_server_fns("")
// Connect to the hot reload server in debug mode
.connect_hot_reload()
// Render the application. This will serialize the root props (the intial count) into the HTML
.route(
"/",
2023-05-04 14:57:11 +00:00
get(move | State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
2023-05-02 22:43:07 +00:00
ssr_state.render(
&ServeConfigBuilder::new(
app,
2023-05-04 14:57:11 +00:00
0,
2023-05-02 22:43:07 +00:00
)
.build(),
)
)}),
)
// Render the application with a different intial count
.route(
"/:initial_count",
get(move |Path(intial_count): Path<usize>, State(ssr_state): State<SSRState>| async move { axum::body::Full::from(
ssr_state.render(
&ServeConfigBuilder::new(
app,
intial_count,
)
.build(),
)
)}),
)
.with_state(SSRState::default())
2023-05-02 16:06:54 +00:00
.into_make_service(),
)
.await
.unwrap();
});
}
}
2023-05-02 22:43:07 +00:00
fn app(cx: Scope<usize>) -> Element {
let mut count = use_state(cx, || *cx.props);
2023-05-02 16:06:54 +00:00
cx.render(rsx! {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
})
}