2021-10-25 01:30:36 +08:00
|
|
|
//! Example: real-world usage of hydration
|
2021-07-29 09:46:53 +08:00
|
|
|
//! ------------------------------------
|
|
|
|
//!
|
|
|
|
//! 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::*;
|
2022-09-14 07:22:27 +08:00
|
|
|
use dioxus_desktop::Config;
|
2021-07-29 09:46:53 +08:00
|
|
|
|
|
|
|
fn main() {
|
2023-07-26 03:30:08 +08:00
|
|
|
let mut vdom = VirtualDom::new(app);
|
|
|
|
let _ = vdom.rebuild();
|
2022-11-16 08:37:23 +08:00
|
|
|
let content = dioxus_ssr::pre_render(&vdom);
|
2022-01-03 07:35:38 +08:00
|
|
|
|
2022-09-14 07:22:27 +08:00
|
|
|
dioxus_desktop::launch_cfg(app, Config::new().with_prerendered(content));
|
2021-07-29 09:46:53 +08:00
|
|
|
}
|
|
|
|
|
2022-01-03 07:35:38 +08:00
|
|
|
fn app(cx: Scope) -> Element {
|
2022-12-08 05:11:40 +08:00
|
|
|
let val = use_state(cx, || 0);
|
2021-09-24 14:37:51 +08:00
|
|
|
|
2021-07-29 09:46:53 +08:00
|
|
|
cx.render(rsx! {
|
|
|
|
div {
|
2021-12-30 16:14:47 +08:00
|
|
|
h1 { "hello world. Count: {val}" }
|
2021-07-29 09:46:53 +08:00
|
|
|
button {
|
2022-03-01 15:50:03 +08:00
|
|
|
onclick: move |_| *val.make_mut() += 1,
|
2021-07-29 09:46:53 +08:00
|
|
|
"click to increment"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
2022-01-03 07:35:38 +08:00
|
|
|
}
|