mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 14:44:12 +00:00
d9546d9504
* feat: use synchronous router design * feat: function to get router out of dom * chore: restructure workspace to use renderers as packages, not features
33 lines
1.2 KiB
Rust
33 lines
1.2 KiB
Rust
//! Example: real-world usage of hydration
|
|
//! ------------------------------------
|
|
//!
|
|
//! This example shows how to pre-render a page using dioxus SSR and then how to rehydrate it on the client side.
|
|
//!
|
|
//! To accomplish hydration on the web, you'll want to set up a slightly more sophisticated build & bundle strategy. In
|
|
//! the official docs, we have a guide for using DioxusStudio as a build tool with pre-rendering and hydration.
|
|
//!
|
|
//! In this example, we pre-render the page to HTML and then pass it into the desktop configuration. This serves as a
|
|
//! proof-of-concept for the hydration feature, but you'll probably only want to use hydration for the web.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
let vdom = VirtualDom::new(app);
|
|
let content = dioxus_ssr::render_vdom_cfg(&vdom, |f| f.pre_render(true));
|
|
|
|
dioxus_desktop::launch_cfg(app, |c| c.with_prerendered(content));
|
|
}
|
|
|
|
fn app(cx: Scope) -> Element {
|
|
let val = use_state(&cx, || 0);
|
|
|
|
cx.render(rsx! {
|
|
div {
|
|
h1 { "hello world. Count: {val}" }
|
|
button {
|
|
onclick: move |_| *val.make_mut() += 1,
|
|
"click to increment"
|
|
}
|
|
}
|
|
})
|
|
}
|