add static generation hydrated example

Cargo.toml

@@ -30,6 +30,7 @@ members = [
     "packages/fullstack/examples/axum-desktop",
     "packages/fullstack/examples/salvo-hello-world",
     "packages/fullstack/examples/warp-hello-world",
+    "packages/fullstack/examples/static-hydrated",
     "docs/guide",
     "docs/router",
     # Full project examples

packages/fullstack/examples/static-hydrated/.gitignore

@@ -0,0 +1,3 @@
+docs
+target
+static

packages/fullstack/examples/static-hydrated/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "static-hydrated"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus-web = { workspace = true, features = ["hydrate"], optional = true }
+dioxus = { workspace = true }
+dioxus-fullstack = { workspace = true, features = ["router"] }
+dioxus-router = { workspace = true}
+tokio = { workspace = true, features = ["full"], optional = true }
+serde = "1.0.159"
+
+[features]
+default = []
+ssr = ["tokio", "dioxus-fullstack/ssr"]
+web = ["dioxus-web"]

packages/fullstack/examples/static-hydrated/Dioxus.toml

@@ -0,0 +1,46 @@
+[application]
+
+# App (Project) Name
+name = "Dioxus"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "docs"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "dioxus | ⛺"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = ["tailwind.css"]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# serve: [dev-server] only
+
+# CSS style file
+style = []
+
+# Javascript code file
+script = []

packages/fullstack/examples/static-hydrated/src/main.rs

@@ -0,0 +1,83 @@
+//! Run with:
+//!
+//! ```sh
+//! dioxus build --features web
+//! cargo run --features ssr
+//! ```
+
+#![allow(non_snake_case, unused)]
+use dioxus::prelude::*;
+use dioxus_fullstack::{launch, prelude::*};
+use dioxus_router::prelude::*;
+use serde::{Deserialize, Serialize};
+
+// Generate all routes and output them to the docs path
+#[cfg(feature = "ssr")]
+#[tokio::main]
+async fn main() {
+    pre_cache_static_routes_with_props(
+        &ServeConfigBuilder::new_with_router(dioxus_fullstack::router::FullstackRouterConfig::<
+            Route,
+        >::default())
+        .assets_path("docs")
+        .incremental(IncrementalRendererConfig::default().static_dir("docs"))
+        .build(),
+    )
+    .await
+    .unwrap();
+}
+
+// Hydrate the page
+#[cfg(feature = "web")]
+fn main() {
+    dioxus_web::launch_with_props(
+        dioxus_fullstack::router::RouteWithCfg::<Route>,
+        dioxus_fullstack::prelude::get_root_props_from_document()
+            .expect("Failed to get root props from document"),
+        dioxus_web::Config::default().hydrate(true),
+    );
+}
+
+#[derive(Clone, Routable, Debug, PartialEq, Serialize, Deserialize)]
+enum Route {
+    #[route("/")]
+    Home {},
+    #[route("/blog")]
+    Blog,
+}
+
+#[inline_props]
+fn Blog(cx: Scope) -> Element {
+    render! {
+        Link { target: Route::Home {}, "Go to counter" }
+        table {
+            tbody {
+                for _ in 0..100 {
+                    tr {
+                        for _ in 0..100 {
+                            td { "hello world!" }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#[inline_props]
+fn Home(cx: Scope) -> Element {
+    let mut count = use_state(cx, || 0);
+    let text = use_state(cx, || "...".to_string());
+
+    cx.render(rsx! {
+        Link {
+            target: Route::Blog {},
+            "Go to blog"
+        }
+        div {
+            h1 { "High-Five counter: {count}" }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+        }
+    })
+}