@@ -1131,7 +1131,7 @@ async fn hydration_with_camelcase_svg_elements() {
}
}
- #[function_component]
+ #[component]
fn App() -> Html {
let counter = use_state(|| 0);
let onclick = {
diff --git a/tools/changelog/src/yew_package.rs b/tools/changelog/src/yew_package.rs
index 30278c993d0..c7f467145b6 100644
--- a/tools/changelog/src/yew_package.rs
+++ b/tools/changelog/src/yew_package.rs
@@ -6,6 +6,7 @@ pub enum YewPackage {
Yew,
YewAgent,
YewRouter,
+ YewLink,
}
impl YewPackage {
@@ -14,6 +15,7 @@ impl YewPackage {
YewPackage::Yew => &["A-yew", "A-yew-macro", "macro"],
YewPackage::YewAgent => &["A-yew-agent"],
YewPackage::YewRouter => &["A-yew-router", "A-yew-router-macro"],
+ YewPackage::YewLink => &["A-yew-link", "A-yew-link-macro"],
}
}
}
diff --git a/tools/ssr-e2e-harness/Cargo.toml b/tools/ssr-e2e-harness/Cargo.toml
index d2dc8fbc28a..3c1ec539385 100644
--- a/tools/ssr-e2e-harness/Cargo.toml
+++ b/tools/ssr-e2e-harness/Cargo.toml
@@ -6,5 +6,6 @@ rust-version.workspace = true
[dependencies]
gloo = { workspace = true, features = ["futures"] }
-web-sys = { workspace = true }
+web-sys = { workspace = true, features = ["Performance", "PerformanceEntry"] }
wasm-bindgen = { workspace = true }
+yew = { path = "../../packages/yew", features = ["csr", "hydration", "test"] }
diff --git a/tools/ssr-e2e-harness/src/lib.rs b/tools/ssr-e2e-harness/src/lib.rs
index 6309557cd9c..b36dd9a0fef 100644
--- a/tools/ssr-e2e-harness/src/lib.rs
+++ b/tools/ssr-e2e-harness/src/lib.rs
@@ -2,6 +2,8 @@ use std::time::Duration;
use gloo::utils::document;
use wasm_bindgen::prelude::*;
+use yew::Renderer;
+use yew::html::BaseComponent;
/// Returns the `` element used by wasm-bindgen-test as the
/// test output container.
@@ -56,3 +58,228 @@ pub fn push_route(path: &str) {
.push_state_with_url(&JsValue::NULL, "", Some(path))
.unwrap();
}
+
+fn performance() -> web_sys::Performance {
+ web_sys::window().unwrap().performance().unwrap()
+}
+
+/// Counts completed network requests to URLs containing `needle` using the
+/// Performance Resource Timing API. This works regardless of how the request
+/// was initiated (gloo-net, window.fetch, XMLHttpRequest, etc.) because it
+/// observes the browser's actual network activity.
+pub fn resource_request_count(needle: &str) -> u32 {
+ let entries = performance().get_entries_by_type("resource");
+ let mut count = 0;
+ for i in 0..entries.length() {
+ let entry: web_sys::PerformanceEntry = entries.get(i).unchecked_into();
+ if entry.name().contains(needle) {
+ count += 1;
+ }
+ }
+ count
+}
+
+/// Clears all resource timing entries so that subsequent calls to
+/// [`resource_request_count`] only see new requests.
+pub fn clear_resource_timings() {
+ performance().clear_resource_timings();
+}
+
+/// Returns the text content of the first `
` in the document.
+pub fn get_title_text() -> Option {
+ document()
+ .query_selector("h1.title")
+ .ok()
+ .flatten()
+ .map(|el| el.text_content().unwrap_or_default())
+}
+
+/// Returns the text content of the first `.section.container` inside the
+/// test output element.
+pub fn post_body_text() -> String {
+ output_element()
+ .query_selector(".section.container")
+ .ok()
+ .flatten()
+ .map(|el| el.text_content().unwrap_or_default())
+ .unwrap_or_default()
+}
+
+/// Parses `html` into a detached container element and returns the text
+/// content of the first element matching `selector`, if any.
+pub fn extract_text_from_html(html: &str, selector: &str) -> Option {
+ let container = document().create_element("div").unwrap();
+ container.set_inner_html(html);
+ container
+ .query_selector(selector)
+ .ok()
+ .flatten()
+ .and_then(|el| el.text_content())
+}
+
+/// Shared e2e scenario used by the yew-link SSR router examples.
+///
+/// Phases:
+/// 1. Directly visit `/posts/0` by fetching its SSR HTML, hydrate, and assert that hydration did
+/// not trigger any fetch to `link_endpoint`.
+/// 2. Click the "Posts" navbar link, then the post 0 card, and wait for the post page to render.
+/// 3. Assert at least one fetch to `link_endpoint` happened during the client-side navigation and
+/// that the rendered title/body match the original SSR HTML.
+///
+/// `make_renderer` is a closure that builds a `Renderer` rooted at
+/// [`output_element()`]. It is invoked after the SSR HTML has been injected
+/// so that hydration picks it up.
+pub async fn assert_ssr_hydration_and_client_navigation(
+ make_renderer: impl FnOnce() -> Renderer,
+ server_base: &str,
+ link_endpoint: &str,
+) where
+ COMP: BaseComponent,
+{
+ // -- Part 1: Direct SSR visit to /posts/0 triggers no fetch to link_endpoint --
+
+ let ssr_html = fetch_ssr_html(server_base, "/posts/0").await;
+ let ssr_title = extract_text_from_html(&ssr_html, "h1.title")
+ .expect("SSR HTML for /posts/0 should contain h1.title");
+ let ssr_body = extract_text_from_html(&ssr_html, ".section.container").unwrap_or_default();
+
+ clear_resource_timings();
+
+ output_element().set_inner_html(&ssr_html);
+ push_route("/posts/0");
+ let app = make_renderer().hydrate();
+
+ wait_for(
+ || {
+ let html = output_element().inner_html();
+ html.contains("") && !html.contains("Loading post...")
+ },
+ 5000,
+ "post page content after SSR hydration",
+ )
+ .await;
+
+ let link_fetches = resource_request_count(link_endpoint);
+ let title = get_title_text();
+
+ assert_eq!(
+ link_fetches, 0,
+ "direct SSR visit to /posts/0 should not trigger any fetch to {link_endpoint}"
+ );
+ let title = title.expect("h1.title should be present on the SSR post page");
+ assert!(!title.is_empty(), "SSR post title should not be empty");
+
+ // -- Part 2: Navigate to /posts within the same app, then to /posts/0 --
+
+ yew::scheduler::flush().await;
+
+ clear_resource_timings();
+
+ let posts_link: web_sys::HtmlElement = output_element()
+ .query_selector("a.navbar-item[href='/posts']")
+ .unwrap()
+ .expect("Posts navbar link should exist")
+ .dyn_into()
+ .unwrap();
+ posts_link.click();
+ yew::scheduler::flush().await;
+
+ wait_for(
+ || {
+ document()
+ .query_selector("a.title.is-block")
+ .ok()
+ .flatten()
+ .is_some()
+ && get_title_text().as_deref() == Some("Posts")
+ },
+ 15000,
+ "posts list after client-side navigation to /posts",
+ )
+ .await;
+
+ clear_resource_timings();
+
+ wait_for(
+ || {
+ output_element()
+ .query_selector("a.title.is-block[href='/posts/0']")
+ .ok()
+ .flatten()
+ .is_some()
+ },
+ 15000,
+ "post 0 card link on posts list",
+ )
+ .await;
+
+ let post_link: web_sys::HtmlElement = output_element()
+ .query_selector("a.title.is-block[href='/posts/0']")
+ .unwrap()
+ .unwrap()
+ .dyn_into()
+ .unwrap();
+ post_link.click();
+ yew::scheduler::flush().await;
+
+ wait_for(
+ || {
+ document()
+ .query_selector("h2.subtitle")
+ .ok()
+ .flatten()
+ .map(|el| el.text_content().unwrap_or_default())
+ .is_some_and(|text| text.starts_with("by "))
+ },
+ 15000,
+ "post page content after client-side navigation to /posts/0",
+ )
+ .await;
+
+ // -- Part 3: Verify fetch happened and content matches SSR --
+
+ let nav_link_fetches = resource_request_count(link_endpoint);
+ let nav_title = get_title_text();
+ let nav_body = post_body_text();
+
+ assert!(
+ nav_link_fetches >= 1,
+ "client-side navigation to /posts/0 should trigger at least one fetch to {link_endpoint}, \
+ got {nav_link_fetches}"
+ );
+
+ let nav_title = nav_title.expect("h1.title should be present after client-side navigation");
+ assert_eq!(
+ ssr_title, nav_title,
+ "post title should match between SSR and client-side navigation"
+ );
+ assert_eq!(
+ ssr_body, nav_body,
+ "post body should match between SSR and client-side navigation"
+ );
+
+ app.destroy();
+ yew::scheduler::flush().await;
+}
+
+/// Shared e2e scenario that asserts hydrating the home page ("/") produces
+/// HTML containing the word "Welcome".
+pub async fn assert_hydrate_home(
+ make_renderer: impl FnOnce() -> Renderer,
+ server_base: &str,
+) where
+ COMP: BaseComponent,
+{
+ setup_ssr_page(server_base, "/").await;
+ let app = make_renderer().hydrate();
+
+ wait_for(
+ || output_element().inner_html().contains("Welcome"),
+ 5000,
+ "home page content after hydration",
+ )
+ .await;
+
+ app.destroy();
+ yew::scheduler::flush().await;
+}
diff --git a/tools/ssr-e2e/Cargo.toml b/tools/ssr-e2e/Cargo.toml
index 6e2d2076660..652a4e62970 100644
--- a/tools/ssr-e2e/Cargo.toml
+++ b/tools/ssr-e2e/Cargo.toml
@@ -6,7 +6,7 @@ rust-version.workspace = true
[dependencies]
clap = { workspace = true }
-tokio = { workspace = true, features = ["macros", "rt-multi-thread", "process", "time", "signal"] }
+tokio = { workspace = true, features = ["macros", "rt-multi-thread", "process", "time"] }
reqwest = { workspace = true }
[target.'cfg(unix)'.dependencies]
diff --git a/tools/ssr-e2e/src/main.rs b/tools/ssr-e2e/src/main.rs
index 667733643c6..64f4bcfab04 100644
--- a/tools/ssr-e2e/src/main.rs
+++ b/tools/ssr-e2e/src/main.rs
@@ -92,7 +92,9 @@ async fn wait_for_server(url: &str, timeout: Duration) -> bool {
fn shutdown_server(server: &mut Child) {
#[cfg(unix)]
if let Some(id) = server.id() {
- let _ = unsafe { libc::kill(-(id as i32), libc::SIGTERM) };
+ unsafe {
+ libc::kill(-(id as i32), libc::SIGTERM);
+ }
return;
}
@@ -143,6 +145,7 @@ async fn main() -> ExitCode {
let test_result = Command::new("cargo")
.args(&cargo_args)
.env("WASM_BINDGEN_TEST_NO_ORIGIN_ISOLATION", "1")
+ .env("WASM_BINDGEN_TEST_NO_STREAM", "1")
.status()
.await;
diff --git a/tools/website-test/Cargo.toml b/tools/website-test/Cargo.toml
index f8e6deb75d3..193a921bec9 100644
--- a/tools/website-test/Cargo.toml
+++ b/tools/website-test/Cargo.toml
@@ -18,11 +18,17 @@ serde = { workspace = true, features = ["derive"] }
wasm-bindgen.workspace = true
wasm-bindgen-futures.workspace = true
weblog = "0.3.0"
-yew = { path = "../../packages/yew/", features = ["ssr", "csr", "serde"] }
+yew = { path = "../../packages/yew/", features = ["ssr", "csr", "hydration", "serde"] }
yew-autoprops = "0.5.0"
yew-router = { path = "../../packages/yew-router/" }
tokio = { workspace = true, features = ["rt", "macros"] }
+[target.'cfg(not(target_arch = "wasm32"))'.dev-dependencies]
+actix-web = { workspace = true }
+axum = { workspace = true }
+serde_json = { workspace = true }
+yew-link = { path = "../../packages/yew-link/", features = ["actix", "axum"] }
+
[dev-dependencies.web-sys]
workspace = true
features = [
diff --git a/tools/website-test/build.rs b/tools/website-test/build.rs
index b3b4b462306..217fe1e7714 100644
--- a/tools/website-test/build.rs
+++ b/tools/website-test/build.rs
@@ -183,7 +183,7 @@ impl Level {
if should_combine_code_blocks(file)? {
let res = combined_code_blocks(file)?;
self.write_space(dst, level);
- writeln!(dst, "/// ```rust, no_run")?;
+ writeln!(dst, "/// ```no_run")?;
for line in res.lines() {
self.write_space(dst, level);
writeln!(dst, "/// {line}")?;
diff --git a/website/docs/advanced-topics/server-side-rendering.mdx b/website/docs/advanced-topics/server-side-rendering.mdx
index c31d1c668db..b2b5236fef6 100644
--- a/website/docs/advanced-topics/server-side-rendering.mdx
+++ b/website/docs/advanced-topics/server-side-rendering.mdx
@@ -128,6 +128,247 @@ suspended.
With this approach, developers can build a client-agnostic, SSR-ready
application with data fetching with very little effort.
+### Low-level hooks
+
+Yew ships two low-level hooks for carrying server-computed state to the client:
+
+- **`use_prepared_state!`** runs an (optionally async) closure during SSR, serializes the result, and delivers it to the client during hydration. Ideal for fetching data that the component needs on first render.
+- **`use_transitive_state!`** is similar, but the closure runs _after_ the component's SSR output is produced. Useful for collecting caches or aggregated state.
+
+Both use `bincode` + `base64` under the hood and are embedded in the HTML as `