Wait for the suspense boundary above the router to resolve before sending the first streaming chunk (#3891)

* Change the suspense streaming context after suspense is resolved in the router

* Wait for the suspense context before streaming the first chunk in ssr

* forward more response parts

* warn

* extract the hydration format into a crate

* Fix hydration when no data is sent

* forward web and server features

* Fix suspense that starts on the client

* fix use_server_future on the client

* Add documentation for fullstack hooks and protocol

* downgrade rust edition

* fix clippy

* fix tests

* fix clippy

* Fix pure web compile

* undo changes to the fullstack router example

* fix formatting

Cargo.lock

@@ -3905,6 +3905,8 @@ dependencies = [
  "dioxus-cli-config",
  "dioxus-desktop",
  "dioxus-devtools",
+ "dioxus-fullstack-hooks",
+ "dioxus-fullstack-protocol",
  "dioxus-history",
  "dioxus-interpreter-js",
  "dioxus-isrg",
@@ -3938,6 +3940,30 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "dioxus-fullstack-hooks"
+version = "0.6.3"
+dependencies = [
+ "dioxus-core",
+ "dioxus-fullstack",
+ "dioxus-fullstack-protocol",
+ "dioxus-hooks",
+ "dioxus-signals",
+ "futures-channel",
+ "serde",
+]
+
+[[package]]
+name = "dioxus-fullstack-protocol"
+version = "0.6.3"
+dependencies = [
+ "base64 0.22.1",
+ "ciborium",
+ "dioxus-core",
+ "serde",
+ "tracing",
+]
+
 [[package]]
 name = "dioxus-history"
 version = "0.6.3"
@@ -4177,6 +4203,7 @@ dependencies = [
  "criterion",
  "dioxus",
  "dioxus-cli-config",
+ "dioxus-fullstack-hooks",
  "dioxus-history",
  "dioxus-lib",
  "dioxus-router-macro",
@@ -4291,13 +4318,13 @@ name = "dioxus-web"
 version = "0.6.3"
 dependencies = [
  "async-trait",
- "ciborium",
  "dioxus",
  "dioxus-cli-config",
  "dioxus-core",
  "dioxus-core-types",
  "dioxus-devtools",
  "dioxus-document",
+ "dioxus-fullstack-protocol",
  "dioxus-history",
  "dioxus-html",
  "dioxus-interpreter-js",

Cargo.toml

@@ -38,6 +38,8 @@ members = [
     "packages/document",
     "packages/extension",
     "packages/fullstack",
+    "packages/fullstack-hooks",
+    "packages/fullstack-protocol",
     "packages/generational-box",
     "packages/history",
     "packages/hooks",
@@ -103,6 +105,7 @@ members = [
     "packages/playwright-tests/nested-suspense",
     "packages/playwright-tests/cli-optimization",
     "packages/playwright-tests/wasm-split-harness",
+    "packages/playwright-tests/wasm-split-harness",
     "packages/playwright-tests/default-features-disabled"
 ]
 
@@ -142,6 +145,8 @@ dioxus-cli-opt = { path = "packages/cli-opt", version = "0.6.2" }
 dioxus-devtools = { path = "packages/devtools", version = "0.6.2" }
 dioxus-devtools-types = { path = "packages/devtools-types", version = "0.6.2" }
 dioxus-fullstack = { path = "packages/fullstack", version = "0.6.2" }
+dioxus-fullstack-hooks = { path = "packages/fullstack-hooks", version = "0.6.3" }
+dioxus-fullstack-protocol = { path = "packages/fullstack-protocol", version = "0.6.3" }
 dioxus_server_macro = { path = "packages/server-macro", version = "0.6.2", default-features = false }
 dioxus-dx-wire-format = { path = "packages/dx-wire-format", version = "0.6.2" }
 dioxus-logger = { path = "packages/logger", version = "0.6.2" }

examples/fullstack-router/src/main.rs

@@ -52,24 +52,24 @@ fn Home() -> Element {
     let mut text = use_signal(|| "...".to_string());
 
     rsx! {
-        Link { to: Route::Blog { id: count() }, "Go to blog" }
-        div {
-            h1 { "High-Five counter: {count}" }
-            button { onclick: move |_| count += 1, "Up high!" }
-            button { onclick: move |_| count -= 1, "Down low!" }
-            button {
-                onclick: move |_| async move {
-                    if let Ok(data) = get_server_data().await {
-                        println!("Client received: {}", data);
-                        text.set(data.clone());
-                        post_server_data(data).await.unwrap();
-                    }
-                },
-                "Run server function!"
-            }
-            "Server said: {text}"
+    Link { to: Route::Blog { id: count() }, "Go to blog" }
+    div {
+        h1 { "High-Five counter: {count}" }
+        button { onclick: move |_| count += 1, "Up high!" }
+        button { onclick: move |_| count -= 1, "Down low!" }
+        button {
+            onclick: move |_| async move {
+                if let Ok(data) = get_server_data().await {
+                    println!("Client received: {}", data);
+                    text.set(data.clone());
+                    post_server_data(data).await.unwrap();
+                }
+            },
+            "Run server function!"
         }
-    }
+        "Server said: {text}"
+                    }
+                }
 }
 
 #[server(PostServerData)]

packages/core/src/global_context.rs

@@ -1,3 +1,4 @@
+use crate::prelude::SuspenseContext;
 use crate::runtime::RuntimeError;
 use crate::{innerlude::SuspendedFuture, runtime::Runtime, CapturedError, Element, ScopeId, Task};
 use std::future::Future;
@@ -40,6 +41,13 @@ pub fn throw_error(error: impl Into<CapturedError> + 'static) {
         .throw_error(error)
 }
 
+/// Get the suspense context the current scope is in
+pub fn suspense_context() -> Option<SuspenseContext> {
+    current_scope_id()
+        .unwrap_or_else(|e| panic!("{}", e))
+        .suspense_context()
+}
+
 /// Consume context from the current scope
 pub fn try_consume_context<T: 'static + Clone>() -> Option<T> {
     Runtime::with_current_scope(|cx| cx.consume_context::<T>())

packages/core/src/lib.rs

@@ -96,14 +96,14 @@ pub mod prelude {
         fc_to_builder, generation, has_context, needs_update, needs_update_any, parent_scope,
         provide_context, provide_error_boundary, provide_root_context, queue_effect, remove_future,
         schedule_update, schedule_update_any, spawn, spawn_forever, spawn_isomorphic, suspend,
-        throw_error, try_consume_context, use_after_render, use_before_render, use_drop, use_hook,
-        use_hook_with_cleanup, with_owner, AnyValue, Attribute, Callback, Component,
-        ComponentFunction, Context, Element, ErrorBoundary, ErrorContext, Event, EventHandler,
-        Fragment, HasAttributes, IntoAttributeValue, IntoDynNode, OptionStringFromMarker,
-        Properties, ReactiveContext, RenderError, Runtime, RuntimeGuard, ScopeId, ScopeState,
-        SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary, SuspenseBoundaryProps,
-        SuspenseContext, SuspenseExtension, Task, Template, TemplateAttribute, TemplateNode, VNode,
-        VNodeInner, VirtualDom,
+        suspense_context, throw_error, try_consume_context, use_after_render, use_before_render,
+        use_drop, use_hook, use_hook_with_cleanup, with_owner, AnyValue, Attribute, Callback,
+        Component, ComponentFunction, Context, Element, ErrorBoundary, ErrorContext, Event,
+        EventHandler, Fragment, HasAttributes, IntoAttributeValue, IntoDynNode,
+        OptionStringFromMarker, Properties, ReactiveContext, RenderError, Runtime, RuntimeGuard,
+        ScopeId, ScopeState, SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary,
+        SuspenseBoundaryProps, SuspenseContext, SuspenseExtension, Task, Template,
+        TemplateAttribute, TemplateNode, VNode, VNodeInner, VirtualDom,
     };
 }
 

packages/core/src/runtime.rs

@@ -116,6 +116,15 @@ impl Runtime {
         result
     }
 
+    /// Run a closure with the rendering flag set to false
+    pub(crate) fn while_not_rendering<T>(&self, f: impl FnOnce() -> T) -> T {
+        let previous = self.rendering.get();
+        self.rendering.set(false);
+        let result = f();
+        self.rendering.set(previous);
+        result
+    }
+
     /// Create a scope context. This slab is synchronized with the scope slab.
     pub(crate) fn create_scope(&self, context: Scope) {
         let id = context.id;

packages/core/src/scope_context.rs

@@ -447,7 +447,12 @@ impl Scope {
         let mut hooks = self.hooks.try_borrow_mut().expect("The hook list is already borrowed: This error is likely caused by trying to use a hook inside a hook which violates the rules of hooks.");
 
         if cur_hook >= hooks.len() {
-            hooks.push(Box::new(initializer()));
+            Runtime::with(|rt| {
+                rt.while_not_rendering(|| {
+                    hooks.push(Box::new(initializer()));
+                });
+            })
+            .unwrap()
         }
 
         self.use_hook_inner::<State>(hooks, cur_hook)
@@ -620,4 +625,9 @@ impl ScopeId {
     pub fn throw_error(self, error: impl Into<CapturedError> + 'static) {
         throw_into(error, self)
     }
+
+    /// Get the suspense context the current scope is in
+    pub fn suspense_context(&self) -> Option<SuspenseContext> {
+        Runtime::with_scope(*self, |cx| cx.suspense_boundary.suspense_context().cloned()).unwrap()
+    }
 }

packages/core/src/suspense/component.rs

@@ -360,7 +360,7 @@ impl SuspenseBoundaryProps {
                     SuspenseContext::downcast_suspense_boundary_from_scope(&dom.runtime, scope_id)
                         .unwrap();
                 suspense_context.take_suspended_nodes();
-                mark_suspense_resolved(dom, scope_id);
+                mark_suspense_resolved(&suspense_context, dom, scope_id);
 
                 nodes_created
             };
@@ -437,6 +437,9 @@ impl SuspenseBoundaryProps {
             let props = Self::downcast_from_props(&mut *scope_state.props).unwrap();
             props.children.clone_from(&children);
             scope_state.last_rendered_node = Some(children);
+
+            // Run any closures that were waiting for the suspense to resolve
+            suspense_context.run_resolved_closures(&dom.runtime);
         })
     }
 
@@ -571,7 +574,7 @@ impl SuspenseBoundaryProps {
                     // Set the last rendered node to the new children
                     dom.scopes[scope_id.0].last_rendered_node = Some(new_children);
 
-                    mark_suspense_resolved(dom, scope_id);
+                    mark_suspense_resolved(&suspense_context, dom, scope_id);
                 }
             }
         })
@@ -579,8 +582,14 @@ impl SuspenseBoundaryProps {
 }
 
 /// Move to a resolved suspense state
-fn mark_suspense_resolved(dom: &mut VirtualDom, scope_id: ScopeId) {
+fn mark_suspense_resolved(
+    suspense_context: &SuspenseContext,
+    dom: &mut VirtualDom,
+    scope_id: ScopeId,
+) {
     dom.resolved_scopes.push(scope_id);
+    // Run any closures that were waiting for the suspense to resolve
+    suspense_context.run_resolved_closures(&dom.runtime);
 }
 
 /// Move from a resolved suspense state to an suspended state
@@ -590,12 +599,12 @@ fn un_resolve_suspense(dom: &mut VirtualDom, scope_id: ScopeId) {
 
 impl SuspenseContext {
     /// Run a closure under a suspense boundary
-    pub fn under_suspense_boundary<O>(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O {
+    pub(crate) fn under_suspense_boundary<O>(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O {
         runtime.with_suspense_location(SuspenseLocation::UnderSuspense(self.clone()), f)
     }
 
     /// Run a closure under a suspense placeholder
-    pub fn in_suspense_placeholder<O>(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O {
+    pub(crate) fn in_suspense_placeholder<O>(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O {
         runtime.with_suspense_location(SuspenseLocation::InSuspensePlaceholder(self.clone()), f)
     }
 

packages/core/src/suspense/mod.rs

@@ -102,6 +102,7 @@ impl SuspenseContext {
                 id: Cell::new(ScopeId::ROOT),
                 suspended_nodes: Default::default(),
                 frozen: Default::default(),
+                after_suspense_resolved: Default::default(),
             }),
         }
     }
@@ -184,10 +185,26 @@ impl SuspenseContext {
             .find_map(|task| task.suspense_placeholder())
             .map(std::result::Result::Ok)
     }
+
+    /// Run a closure after suspense is resolved
+    pub fn after_suspense_resolved(&self, callback: impl FnOnce() + 'static) {
+        let mut closures = self.inner.after_suspense_resolved.borrow_mut();
+        closures.push(Box::new(callback));
+    }
+
+    /// Run all closures that were queued to run after suspense is resolved
+    pub(crate) fn run_resolved_closures(&self, runtime: &Runtime) {
+        runtime.while_not_rendering(|| {
+            self.inner
+                .after_suspense_resolved
+                .borrow_mut()
+                .drain(..)
+                .for_each(|f| f());
+        })
+    }
 }
 
 /// A boundary that will capture any errors from child components
-#[derive(Debug)]
 pub struct SuspenseBoundaryInner {
     suspended_tasks: RefCell<Vec<SuspendedFuture>>,
     id: Cell<ScopeId>,
@@ -195,6 +212,19 @@ pub struct SuspenseBoundaryInner {
     suspended_nodes: RefCell<Option<VNode>>,
     /// On the server, you can only resolve a suspense boundary once. This is used to track if the suspense boundary has been resolved and if it should be frozen
     frozen: Cell<bool>,
+    /// Closures queued to run after the suspense boundary is resolved
+    after_suspense_resolved: RefCell<Vec<Box<dyn FnOnce()>>>,
+}
+
+impl Debug for SuspenseBoundaryInner {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("SuspenseBoundaryInner")
+            .field("suspended_tasks", &self.suspended_tasks)
+            .field("id", &self.id)
+            .field("suspended_nodes", &self.suspended_nodes)
+            .field("frozen", &self.frozen)
+            .finish()
+    }
 }
 
 /// Provides context methods to [`Result<T, RenderError>`] to show loading indicators for suspended results

packages/fullstack-hooks/Cargo.toml

@@ -0,0 +1,29 @@
+[package]
+name = "dioxus-fullstack-hooks"
+authors = ["Jonathan Kelley", "Evan Almloff"]
+version = { workspace = true }
+edition = "2021"
+description = "Hooks for serializing futures, values in dioxus-fullstack and other utilities"
+license = "MIT OR Apache-2.0"
+repository = "https://github.com/DioxusLabs/dioxus/"
+homepage = "https://dioxuslabs.com"
+keywords = ["web", "gui", "server"]
+resolver = "2"
+
+[dependencies]
+dioxus-core = { workspace = true }
+dioxus-signals = { workspace = true }
+dioxus-hooks = { workspace = true }
+dioxus-fullstack-protocol = { workspace = true }
+futures-channel = { workspace = true }
+serde = { workspace = true }
+
+[dev-dependencies]
+dioxus-fullstack = { workspace = true }
+
+[features]
+web = []
+server = []
+
+[package.metadata.docs.rs]
+cargo-args = ["-Zunstable-options", "-Zrustdoc-scrape-examples"]

packages/fullstack-hooks/README.md

@@ -0,0 +1,32 @@
+# Dioxus Fullstack Hooks
+
+Dioxus fullstack hooks provides hooks and contexts for [`dioxus-fullstack`](https://crates.io/crates/dioxus-fullstack). Libraries that need to integrate with dioxus-fullstack should rely on this crate instead of the renderer for quicker build times.
+
+## Usage
+
+To start using this crate, you can run the following command:
+
+```bash
+cargo add dioxus-fullstack-hooks
+```
+
+Then you can use hooks like `use_server_future` in your components:
+
+```rust
+use dioxus::prelude::*;
+async fn fetch_article(id: u32) -> String {
+    format!("Article {}", id)
+}
+
+fn App() -> Element {
+    let mut article_id = use_signal(|| 0);
+    // `use_server_future` will spawn a task that runs on the server and serializes the result to send to the client.
+    // The future will rerun any time the
+    // Since we bubble up the suspense with `?`, the server will wait for the future to resolve before rendering
+    let article = use_server_future(move || fetch_article(article_id()))?;
+
+    rsx! {
+        "{article().unwrap()}"
+    }
+}
+```

packages/fullstack-hooks/src/hooks/mod.rs

@@ -0,0 +1,4 @@
+mod server_cached;
+pub use server_cached::*;
+mod server_future;
+pub use server_future::*;

packages/fullstack/src/hooks/server_cached.rs → packages/fullstack-hooks/src/hooks/server_cached.rs

@@ -1,4 +1,5 @@
-use dioxus_lib::prelude::use_hook;
+use dioxus_core::prelude::use_hook;
+use dioxus_fullstack_protocol::SerializeContextEntry;
 use serde::{de::DeserializeOwned, Serialize};
 
 /// This allows you to send data from the server to the client. The data is serialized into the HTML on the server and hydrated on the client.
@@ -32,19 +33,21 @@ pub(crate) fn server_cached<O: 'static + Clone + Serialize + DeserializeOwned>(
     value: impl FnOnce() -> O,
     #[allow(unused)] location: &'static std::panic::Location<'static>,
 ) -> O {
+    let serialize = dioxus_fullstack_protocol::serialize_context();
+    #[allow(unused)]
+    let entry: SerializeContextEntry<O> = serialize.create_entry();
     #[cfg(feature = "server")]
     {
-        let serialize = crate::html_storage::serialize_context();
         let data = value();
-        serialize.push(&data, location);
+        entry.insert(&data, location);
         data
     }
     #[cfg(all(not(feature = "server"), feature = "web"))]
     {
-        dioxus_web::take_server_data()
-            .ok()
-            .flatten()
-            .unwrap_or_else(value)
+        match entry.get() {
+            Ok(value) => value,
+            Err(_) => value(),
+        }
     }
     #[cfg(not(any(feature = "server", feature = "web")))]
     {

packages/fullstack/src/hooks/server_future.rs → packages/fullstack-hooks/src/hooks/server_future.rs

@@ -1,4 +1,6 @@
-use dioxus_lib::prelude::*;
+use dioxus_core::prelude::{suspend, use_hook, RenderError};
+use dioxus_hooks::*;
+use dioxus_signals::Readable;
 use serde::{de::DeserializeOwned, Serialize};
 use std::future::Future;
 
@@ -64,27 +66,24 @@ where
     T: Serialize + DeserializeOwned + 'static,
     F: Future<Output = T> + 'static,
 {
-    #[cfg(feature = "server")]
-    let serialize_context = crate::html_storage::use_serialize_context();
+    let serialize_context = use_hook(dioxus_fullstack_protocol::serialize_context);
 
     // We always create a storage entry, even if the data isn't ready yet to make it possible to deserialize pending server futures on the client
-    #[cfg(feature = "server")]
-    let server_storage_entry = use_hook(|| serialize_context.create_entry());
+    #[allow(unused)]
+    let storage_entry: dioxus_fullstack_protocol::SerializeContextEntry<T> =
+        use_hook(|| serialize_context.create_entry());
 
     #[cfg(feature = "server")]
     let caller = std::panic::Location::caller();
 
     // If this is the first run and we are on the web client, the data might be cached
     #[cfg(feature = "web")]
-    let initial_web_result = use_hook(|| {
-        std::rc::Rc::new(std::cell::RefCell::new(Some(
-            dioxus_web::take_server_data::<T>(),
-        )))
-    });
+    let initial_web_result =
+        use_hook(|| std::rc::Rc::new(std::cell::RefCell::new(Some(storage_entry.get()))));
 
     let resource = use_resource(move || {
         #[cfg(feature = "server")]
-        let serialize_context = serialize_context.clone();
+        let storage_entry = storage_entry.clone();
 
         let user_fut = future();
 
@@ -97,10 +96,12 @@ where
             #[cfg(feature = "web")]
             match initial_web_result.take() {
                 // The data was deserialized successfully from the server
-                Some(Ok(Some(o))) => return o,
+                Some(Ok(o)) => return o,
 
                 // The data is still pending from the server. Don't try to resolve it on the client
-                Some(Ok(None)) => std::future::pending::<()>().await,
+                Some(Err(dioxus_fullstack_protocol::TakeDataError::DataPending)) => {
+                    std::future::pending::<()>().await
+                }
 
                 // The data was not available on the server, rerun the future
                 Some(Err(_)) => {}
@@ -114,7 +115,7 @@ where
 
             // If this is the first run and we are on the server, cache the data in the slot we reserved for it
             #[cfg(feature = "server")]
-            serialize_context.insert(server_storage_entry, &out, caller);
+            storage_entry.insert(&out, caller);
 
             out
         }

packages/fullstack-hooks/src/lib.rs

@@ -0,0 +1,7 @@
+#![warn(missing_docs)]
+#![doc = include_str!("../README.md")]
+
+mod hooks;
+pub use hooks::*;
+mod streaming;
+pub use streaming::*;

packages/fullstack-hooks/src/streaming.rs

@@ -0,0 +1,105 @@
+use dioxus_core::prelude::try_consume_context;
+use dioxus_signals::{Readable, Signal, Writable};
+
+/// The status of the streaming response
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub enum StreamingStatus {
+    /// The initial chunk is still being rendered. The http response parts can still be modified with
+    /// [DioxusServerContext::response_parts_mut](https://docs.rs/dioxus-fullstack/0.6.3/dioxus_fullstack/prelude/struct.DioxusServerContext.html#method.response_parts_mut).
+    RenderingInitialChunk,
+    /// The initial chunk has been committed and the response is now streaming. The http response parts
+    /// have already been sent to the client and can no longer be modified.
+    InitialChunkCommitted,
+}
+
+/// The context dioxus fullstack provides for the status of streaming responses on the server
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub struct StreamingContext {
+    current_status: Signal<StreamingStatus>,
+}
+
+impl Default for StreamingContext {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl StreamingContext {
+    /// Create a new streaming context. You should not need to call this directly. Dioxus fullstack will
+    /// provide this context for you.
+    pub fn new() -> Self {
+        Self {
+            current_status: Signal::new(StreamingStatus::RenderingInitialChunk),
+        }
+    }
+
+    /// Commit the initial chunk of the response. This will be called automatically if you are using the
+    /// dioxus router when the suspense boundary above the router is resolved. Otherwise, you will need
+    /// to call this manually to start the streaming part of the response.
+    ///
+    /// Once this method has been called, the http response parts can no longer be modified.
+    pub fn commit_initial_chunk(&mut self) {
+        self.current_status
+            .set(StreamingStatus::InitialChunkCommitted);
+    }
+
+    /// Get the current status of the streaming response. This method is reactive and will cause
+    /// the current reactive context to rerun when the status changes.
+    pub fn current_status(&self) -> StreamingStatus {
+        *self.current_status.read()
+    }
+}
+
+/// Commit the initial chunk of the response. This will be called automatically if you are using the
+/// dioxus router when the suspense boundary above the router is resolved. Otherwise, you will need
+/// to call this manually to start the streaming part of the response.
+///
+/// On the client, this will do nothing.
+///
+/// # Example
+/// ```rust, no_run
+/// # use dioxus::prelude::*;
+/// # use dioxus_fullstack_hooks::*;
+/// # fn Children() -> Element { unimplemented!() }
+/// fn App() -> Element {
+///     // This will start streaming immediately after the current render is complete.
+///     use_hook(commit_initial_chunk);
+///
+///     rsx! { Children {} }
+/// }
+/// ```
+pub fn commit_initial_chunk() {
+    if let Some(mut streaming) = try_consume_context::<StreamingContext>() {
+        streaming.commit_initial_chunk();
+    }
+}
+
+/// Get the current status of the streaming response. This method is reactive and will cause
+/// the current reactive context to rerun when the status changes.
+///
+/// On the client, this will always return `StreamingStatus::InitialChunkCommitted`.
+///
+/// # Example
+/// ```rust, no_run
+/// # use dioxus::prelude::*;
+/// # use dioxus_fullstack_hooks::*;
+/// #[component]
+/// fn MetaTitle(title: String) -> Element {
+///     // If streaming has already started, warn the user that the meta tag will not show
+///     // up in the initial chunk.
+///     use_hook(|| {
+///         if current_status() == StreamingStatus::InitialChunkCommitted {
+///            log::warn!("Since `MetaTitle` was rendered after the initial chunk was committed, the meta tag will not show up in the head without javascript enabled.");
+///         }
+///     });
+///
+///     rsx! { meta { property: "og:title", content: title } }
+/// }
+/// ```
+pub fn current_status() -> StreamingStatus {
+    if let Some(streaming) = try_consume_context::<StreamingContext>() {
+        streaming.current_status()
+    } else {
+        StreamingStatus::InitialChunkCommitted
+    }
+}

packages/fullstack-protocol/Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "dioxus-fullstack-protocol"
+edition = "2021"
+version.workspace = true
+
+[dependencies]
+ciborium.workspace = true
+dioxus-core = { workspace = true }
+base64 = { workspace = true }
+serde = { workspace = true }
+tracing.workspace = true
+
+[features]
+web = []

packages/fullstack-protocol/README.md

@@ -0,0 +1,3 @@
+# Fullstack Protocol
+
+Dioxus-fullstack-protocol is the internal protocol the dioxus web and server renderers use to communicate with each other in dioxus fullstack. It is used to send futures and values from the server to the client during fullstack rendering.

packages/fullstack-protocol/src/lib.rs

@@ -0,0 +1,401 @@
+#![warn(missing_docs)]
+#![doc = include_str!("../README.md")]
+
+use base64::Engine;
+use dioxus_core::CapturedError;
+use serde::Serialize;
+use std::{cell::RefCell, io::Cursor, rc::Rc};
+
+#[cfg(feature = "web")]
+thread_local! {
+    static CONTEXT: RefCell<Option<HydrationContext>> = const { RefCell::new(None) };
+}
+
+/// Data shared between the frontend and the backend for hydration
+/// of server functions.
+#[derive(Default, Clone)]
+pub struct HydrationContext {
+    #[cfg(feature = "web")]
+    /// Is resolving suspense done on the client
+    suspense_finished: bool,
+    data: Rc<RefCell<HTMLData>>,
+}
+
+impl HydrationContext {
+    /// Create a new serialize context from the serialized data
+    pub fn from_serialized(
+        data: &[u8],
+        debug_types: Option<Vec<String>>,
+        debug_locations: Option<Vec<String>>,
+    ) -> Self {
+        Self {
+            #[cfg(feature = "web")]
+            suspense_finished: false,
+            data: Rc::new(RefCell::new(HTMLData::from_serialized(
+                data,
+                debug_types,
+                debug_locations,
+            ))),
+        }
+    }
+
+    /// Serialize the data in the context to be sent to the client
+    pub fn serialized(&self) -> SerializedHydrationData {
+        self.data.borrow().serialized()
+    }
+
+    /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready.
+    pub fn create_entry<T>(&self) -> SerializeContextEntry<T> {
+        let entry_index = self.data.borrow_mut().create_entry();
+
+        SerializeContextEntry {
+            index: entry_index,
+            context: self.clone(),
+            phantom: std::marker::PhantomData,
+        }
+    }
+
+    /// Get the entry for the error in the suspense boundary
+    pub fn error_entry(&self) -> SerializeContextEntry<Option<CapturedError>> {
+        // The first entry is reserved for the error
+        let entry_index = self.data.borrow_mut().create_entry_with_id(0);
+
+        SerializeContextEntry {
+            index: entry_index,
+            context: self.clone(),
+            phantom: std::marker::PhantomData,
+        }
+    }
+
+    /// Extend this data with the data from another [`HydrationContext`]
+    pub fn extend(&self, other: &Self) {
+        self.data.borrow_mut().extend(&other.data.borrow());
+    }
+
+    #[cfg(feature = "web")]
+    /// Run a closure inside of this context
+    pub fn in_context<T>(&self, f: impl FnOnce() -> T) -> T {
+        CONTEXT.with(|context| {
+            let old = context.borrow().clone();
+            *context.borrow_mut() = Some(self.clone());
+            let result = f();
+            *context.borrow_mut() = old;
+            result
+        })
+    }
+
+    pub(crate) fn insert<T: Serialize>(
+        &self,
+        id: usize,
+        value: &T,
+        location: &'static std::panic::Location<'static>,
+    ) {
+        self.data.borrow_mut().insert(id, value, location);
+    }
+
+    pub(crate) fn get<T: serde::de::DeserializeOwned>(
+        &self,
+        id: usize,
+    ) -> Result<T, TakeDataError> {
+        // If suspense is finished on the client, we can assume that the data is available
+        #[cfg(feature = "web")]
+        if self.suspense_finished {
+            return Err(TakeDataError::DataNotAvailable);
+        }
+        self.data.borrow().get(id)
+    }
+}
+
+/// An entry into the serialized context. The order entries are created in must be consistent
+/// between the server and the client.
+pub struct SerializeContextEntry<T> {
+    /// The index this context will be inserted into inside the serialize context
+    index: usize,
+    /// The context this entry is associated with
+    context: HydrationContext,
+    phantom: std::marker::PhantomData<T>,
+}
+
+impl<T> Clone for SerializeContextEntry<T> {
+    fn clone(&self) -> Self {
+        Self {
+            index: self.index,
+            context: self.context.clone(),
+            phantom: std::marker::PhantomData,
+        }
+    }
+}
+
+impl<T> SerializeContextEntry<T> {
+    /// Insert data into an entry that was created with [`SerializeContext::create_entry`]
+    pub fn insert(self, value: &T, location: &'static std::panic::Location<'static>)
+    where
+        T: Serialize,
+    {
+        self.context.insert(self.index, value, location);
+    }
+
+    /// Grab the data from the serialize context
+    pub fn get(&self) -> Result<T, TakeDataError>
+    where
+        T: serde::de::DeserializeOwned,
+    {
+        self.context.get(self.index)
+    }
+}
+
+/// Get or insert the current serialize context. On the client, the hydration context this returns
+/// will always return `TakeDataError::DataNotAvailable` if hydration of the current chunk is finished.
+pub fn serialize_context() -> HydrationContext {
+    #[cfg(feature = "web")]
+    // On the client, the hydration logic provides the context in a global
+    if let Some(current_context) = CONTEXT.with(|context| context.borrow().clone()) {
+        current_context
+    } else {
+        // If the context is not set, then suspense is not active
+        HydrationContext {
+            suspense_finished: true,
+            ..Default::default()
+        }
+    }
+    #[cfg(not(feature = "web"))]
+    {
+        // On the server each scope creates the context lazily
+        dioxus_core::prelude::has_context()
+            .unwrap_or_else(|| dioxus_core::prelude::provide_context(HydrationContext::default()))
+    }
+}
+
+pub(crate) struct HTMLData {
+    /// The position of the cursor in the data. This is only used on the client
+    pub(crate) cursor: usize,
+    /// The data required for hydration
+    pub data: Vec<Option<Vec<u8>>>,
+    /// The types of each serialized data
+    ///
+    /// NOTE: we don't store this in the main data vec because we don't want to include it in
+    /// release mode and we can't assume both the client and server are built with debug assertions
+    /// matching
+    #[cfg(debug_assertions)]
+    pub debug_types: Vec<Option<String>>,
+    /// The locations of each serialized data
+    #[cfg(debug_assertions)]
+    pub debug_locations: Vec<Option<String>>,
+}
+
+impl Default for HTMLData {
+    fn default() -> Self {
+        Self {
+            cursor: 1,
+            data: Vec::new(),
+            #[cfg(debug_assertions)]
+            debug_types: Vec::new(),
+            #[cfg(debug_assertions)]
+            debug_locations: Vec::new(),
+        }
+    }
+}
+
+impl HTMLData {
+    fn from_serialized(
+        data: &[u8],
+        debug_types: Option<Vec<String>>,
+        debug_locations: Option<Vec<String>>,
+    ) -> Self {
+        let data = ciborium::from_reader(Cursor::new(data)).unwrap();
+        Self {
+            cursor: 1,
+            data,
+            #[cfg(debug_assertions)]
+            debug_types: debug_types
+                .unwrap_or_default()
+                .into_iter()
+                .map(Some)
+                .collect(),
+            #[cfg(debug_assertions)]
+            debug_locations: debug_locations
+                .unwrap_or_default()
+                .into_iter()
+                .map(Some)
+                .collect(),
+        }
+    }
+
+    /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready.
+    fn create_entry(&mut self) -> usize {
+        let id = self.cursor;
+        self.cursor += 1;
+        self.create_entry_with_id(id)
+    }
+
+    fn create_entry_with_id(&mut self, id: usize) -> usize {
+        while id + 1 > self.data.len() {
+            self.data.push(None);
+            #[cfg(debug_assertions)]
+            {
+                self.debug_types.push(None);
+                self.debug_locations.push(None);
+            }
+        }
+        id
+    }
+
+    /// Insert data into an entry that was created with [`Self::create_entry`]
+    fn insert<T: Serialize>(
+        &mut self,
+        id: usize,
+        value: &T,
+        location: &'static std::panic::Location<'static>,
+    ) {
+        let mut serialized = Vec::new();
+        ciborium::into_writer(value, &mut serialized).unwrap();
+        self.data[id] = Some(serialized);
+        #[cfg(debug_assertions)]
+        {
+            self.debug_types[id] = Some(std::any::type_name::<T>().to_string());
+            self.debug_locations[id] = Some(location.to_string());
+        }
+    }
+
+    /// Get the data from the serialize context
+    fn get<T: serde::de::DeserializeOwned>(&self, index: usize) -> Result<T, TakeDataError> {
+        if index >= self.data.len() {
+            tracing::trace!(
+                "Tried to take more data than was available, len: {}, index: {}; This is normal if the server function was started on the client, but may indicate a bug if the server function result should be deserialized from the server",
+                self.data.len(),
+                index
+            );
+            return Err(TakeDataError::DataNotAvailable);
+        }
+        let bytes = self.data[index].as_ref();
+        match bytes {
+            Some(bytes) => match ciborium::from_reader(Cursor::new(bytes)) {
+                Ok(x) => Ok(x),
+                Err(err) => {
+                    #[cfg(debug_assertions)]
+                    {
+                        let debug_type = self.debug_types.get(index);
+                        let debug_locations = self.debug_locations.get(index);
+
+                        if let (Some(Some(debug_type)), Some(Some(debug_locations))) =
+                            (debug_type, debug_locations)
+                        {
+                            let client_type = std::any::type_name::<T>();
+                            let client_location = std::panic::Location::caller();
+                            // We we have debug types and a location, we can provide a more helpful error message
+                            tracing::error!(
+                                "Error deserializing data: {err:?}\n\nThis type was serialized on the server at {debug_locations} with the type name {debug_type}. The client failed to deserialize the type {client_type} at {client_location}.",
+                            );
+                            return Err(TakeDataError::DeserializationError(err));
+                        }
+                    }
+                    // Otherwise, just log the generic deserialization error
+                    tracing::error!("Error deserializing data: {:?}", err);
+                    Err(TakeDataError::DeserializationError(err))
+                }
+            },
+            None => Err(TakeDataError::DataPending),
+        }
+    }
+
+    /// Extend this data with the data from another [`HTMLData`]
+    pub(crate) fn extend(&mut self, other: &Self) {
+        // Make sure this vectors error entry exists even if it is empty
+        if self.data.is_empty() {
+            self.data.push(None);
+            #[cfg(debug_assertions)]
+            {
+                self.debug_types.push(None);
+                self.debug_locations.push(None);
+            }
+        }
+
+        let mut other_data_iter = other.data.iter().cloned();
+        #[cfg(debug_assertions)]
+        let mut other_debug_types_iter = other.debug_types.iter().cloned();
+        #[cfg(debug_assertions)]
+        let mut other_debug_locations_iter = other.debug_locations.iter().cloned();
+
+        // Merge the error entry from the other context
+        if let Some(Some(other_error)) = other_data_iter.next() {
+            self.data[0] = Some(other_error.clone());
+            #[cfg(debug_assertions)]
+            {
+                self.debug_types[0] = other_debug_types_iter.next().unwrap_or(None);
+                self.debug_locations[0] = other_debug_locations_iter.next().unwrap_or(None);
+            }
+        }
+
+        // Don't copy the error from the other context
+        self.data.extend(other_data_iter);
+        #[cfg(debug_assertions)]
+        {
+            self.debug_types.extend(other_debug_types_iter);
+            self.debug_locations.extend(other_debug_locations_iter);
+        }
+    }
+
+    /// Encode data as base64. This is intended to be used in the server to send data to the client.
+    pub(crate) fn serialized(&self) -> SerializedHydrationData {
+        let mut serialized = Vec::new();
+        ciborium::into_writer(&self.data, &mut serialized).unwrap();
+
+        let data = base64::engine::general_purpose::STANDARD.encode(serialized);
+
+        let format_js_list_of_strings = |list: &[Option<String>]| {
+            let body = list
+                .iter()
+                .map(|s| match s {
+                    Some(s) => format!(r#""{s}""#),
+                    None => r#""unknown""#.to_string(),
+                })
+                .collect::<Vec<_>>()
+                .join(",");
+            format!("[{}]", body)
+        };
+
+        SerializedHydrationData {
+            data,
+            #[cfg(debug_assertions)]
+            debug_types: format_js_list_of_strings(&self.debug_types),
+            #[cfg(debug_assertions)]
+            debug_locations: format_js_list_of_strings(&self.debug_locations),
+        }
+    }
+}
+
+/// Data that was serialized on the server for hydration on the client. This includes
+/// extra information about the types and sources of the serialized data in debug mode
+pub struct SerializedHydrationData {
+    /// The base64 encoded serialized data
+    pub data: String,
+    /// A list of the types of each serialized data
+    #[cfg(debug_assertions)]
+    pub debug_types: String,
+    /// A list of the locations of each serialized data
+    #[cfg(debug_assertions)]
+    pub debug_locations: String,
+}
+
+/// An error that can occur when trying to take data from the server
+#[derive(Debug)]
+pub enum TakeDataError {
+    /// Deserializing the data failed
+    DeserializationError(ciborium::de::Error<std::io::Error>),
+    /// No data was available
+    DataNotAvailable,
+    /// The server serialized a placeholder for the data, but it isn't available yet
+    DataPending,
+}
+
+impl std::fmt::Display for TakeDataError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::DeserializationError(e) => write!(f, "DeserializationError: {}", e),
+            Self::DataNotAvailable => write!(f, "DataNotAvailable"),
+            Self::DataPending => write!(f, "DataPending"),
+        }
+    }
+}
+
+impl std::error::Error for TakeDataError {}

packages/fullstack/Cargo.toml

@@ -25,7 +25,9 @@ generational-box = { workspace = true }
 # Dioxus + SSR
 dioxus-ssr = { workspace = true, optional = true }
 dioxus-isrg = { workspace = true, optional = true }
-dioxus-router = { workspace = true, optional = true }
+dioxus-router = { workspace = true, features = ["streaming"], optional = true }
+dioxus-fullstack-hooks = { workspace = true }
+dioxus-fullstack-protocol = { workspace = true }
 hyper = { workspace = true, optional = true }
 http = { workspace = true, optional = true }
 
@@ -83,7 +85,7 @@ devtools = ["dioxus-web?/devtools", "dep:dioxus-devtools"]
 mounted = ["dioxus-web?/mounted"]
 file_engine = ["dioxus-web?/file_engine"]
 document = ["dioxus-web?/document"]
-web = ["dep:dioxus-web", "dep:web-sys"]
+web = ["dep:dioxus-web", "dep:web-sys", "dioxus-fullstack-hooks/web"]
 desktop = ["dep:dioxus-desktop", "server_fn/reqwest", "dioxus_server_macro/reqwest"]
 mobile = ["dep:dioxus-mobile", "server_fn/reqwest", "dioxus_server_macro/reqwest"]
 default-tls = ["server_fn/default-tls"]
@@ -103,6 +105,7 @@ axum = [
 server = [
     "server_fn/ssr",
     "dioxus_server_macro/server",
+    "dioxus-fullstack-hooks/server",
     "dep:tokio",
     "dep:tokio-util",
     "dep:tokio-stream",

packages/fullstack/src/axum_core.rs

@@ -202,8 +202,7 @@ async fn handle_server_fns_inner(
             }
 
             // apply the response parts from the server context to the response
-            let mut res_options = server_context.response_parts_mut();
-            res.headers_mut().extend(res_options.headers.drain());
+            server_context.send_response(&mut res);
 
             Ok(res)
         } else {
@@ -237,16 +236,6 @@ pub(crate) fn add_server_context(
     }
 }
 
-fn apply_request_parts_to_response<B>(
-    headers: hyper::header::HeaderMap,
-    response: &mut axum::response::Response<B>,
-) {
-    let mut_headers = response.headers_mut();
-    for (key, value) in headers.iter() {
-        mut_headers.insert(key, value.clone());
-    }
-}
-
 /// State used by [`render_handler`] to render a dioxus component with axum
 #[derive(Clone)]
 pub struct RenderHandleState {
@@ -367,8 +356,7 @@ pub async fn render_handler(
         Ok((freshness, rx)) => {
             let mut response = axum::response::Html::from(Body::from_stream(rx)).into_response();
             freshness.write(response.headers_mut());
-            let headers = server_context.response_parts().headers.clone();
-            apply_request_parts_to_response(headers, &mut response);
+            server_context.send_response(&mut response);
             Result::<http::Response<axum::body::Body>, StatusCode>::Ok(response)
         }
         Err(SSRError::Incremental(e)) => {

packages/fullstack/src/document/mod.rs

@@ -2,7 +2,13 @@
 
 #[cfg(feature = "server")]
 pub mod server;
+use dioxus_fullstack_protocol::SerializeContextEntry;
 #[cfg(feature = "server")]
 pub use server::ServerDocument;
 #[cfg(all(feature = "web", feature = "document"))]
 pub mod web;
+
+#[allow(unused)]
+pub(crate) fn head_element_hydration_entry() -> SerializeContextEntry<bool> {
+    dioxus_fullstack_protocol::serialize_context().create_entry()
+}

packages/fullstack/src/document/server.rs

@@ -64,8 +64,8 @@ impl ServerDocument {
         // We only serialize the head elements if the web document feature is enabled
         #[cfg(feature = "document")]
         {
-            let serialize = crate::html_storage::serialize_context();
-            serialize.push(&!self.0.borrow().streaming, std::panic::Location::caller());
+            super::head_element_hydration_entry()
+                .insert(&!self.0.borrow().streaming, std::panic::Location::caller());
         }
     }
 }

packages/fullstack/src/document/web.rs

@@ -4,10 +4,12 @@
 use dioxus_lib::{document::*, prelude::queue_effect};
 use dioxus_web::WebDocument;
 
+use super::head_element_hydration_entry;
+
 fn head_element_written_on_server() -> bool {
-    dioxus_web::take_server_data()
+    head_element_hydration_entry()
+        .get()
         .ok()
-        .flatten()
         .unwrap_or_default()
 }
 

packages/fullstack/src/hooks/mod.rs

@@ -1,2 +0,0 @@
-pub mod server_cached;
-pub mod server_future;

packages/fullstack/src/html_storage/mod.rs

@@ -1,117 +0,0 @@
-#![cfg(feature = "server")]
-
-use dioxus_lib::prelude::{has_context, provide_context, use_hook};
-use serde::Serialize;
-use std::{cell::RefCell, rc::Rc};
-
-pub(crate) mod serialize;
-
-#[derive(Default, Clone)]
-pub(crate) struct SerializeContext {
-    data: Rc<RefCell<HTMLData>>,
-}
-
-impl SerializeContext {
-    /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready.
-    pub(crate) fn create_entry(&self) -> usize {
-        self.data.borrow_mut().create_entry()
-    }
-
-    /// Insert data into an entry that was created with [`Self::create_entry`]
-    pub(crate) fn insert<T: Serialize>(
-        &self,
-        id: usize,
-        value: &T,
-        location: &'static std::panic::Location<'static>,
-    ) {
-        self.data.borrow_mut().insert(id, value, location);
-    }
-
-    /// Push resolved data into the serialized server data
-    pub(crate) fn push<T: Serialize>(
-        &self,
-        data: &T,
-        location: &'static std::panic::Location<'static>,
-    ) {
-        self.data.borrow_mut().push(data, location);
-    }
-}
-
-pub(crate) fn use_serialize_context() -> SerializeContext {
-    use_hook(serialize_context)
-}
-
-pub(crate) fn serialize_context() -> SerializeContext {
-    has_context().unwrap_or_else(|| provide_context(SerializeContext::default()))
-}
-
-#[derive(Default)]
-pub(crate) struct HTMLData {
-    /// The data required for hydration
-    pub data: Vec<Option<Vec<u8>>>,
-    /// The types of each serialized data
-    ///
-    /// NOTE: we don't store this in the main data vec because we don't want to include it in
-    /// release mode and we can't assume both the client and server are built with debug assertions
-    /// matching
-    #[cfg(debug_assertions)]
-    pub debug_types: Vec<Option<String>>,
-    /// The locations of each serialized data
-    #[cfg(debug_assertions)]
-    pub debug_locations: Vec<Option<String>>,
-}
-
-impl HTMLData {
-    /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready.
-    fn create_entry(&mut self) -> usize {
-        let id = self.data.len();
-        self.data.push(None);
-        #[cfg(debug_assertions)]
-        {
-            self.debug_types.push(None);
-            self.debug_locations.push(None);
-        }
-        id
-    }
-
-    /// Insert data into an entry that was created with [`Self::create_entry`]
-    fn insert<T: Serialize>(
-        &mut self,
-        id: usize,
-        value: &T,
-        location: &'static std::panic::Location<'static>,
-    ) {
-        let mut serialized = Vec::new();
-        ciborium::into_writer(value, &mut serialized).unwrap();
-        self.data[id] = Some(serialized);
-        #[cfg(debug_assertions)]
-        {
-            self.debug_types[id] = Some(std::any::type_name::<T>().to_string());
-            self.debug_locations[id] = Some(location.to_string());
-        }
-    }
-
-    /// Push resolved data into the serialized server data
-    fn push<T: Serialize>(&mut self, data: &T, location: &'static std::panic::Location<'static>) {
-        let mut serialized = Vec::new();
-        ciborium::into_writer(data, &mut serialized).unwrap();
-        self.data.push(Some(serialized));
-        #[cfg(debug_assertions)]
-        {
-            self.debug_types
-                .push(Some(std::any::type_name::<T>().to_string()));
-            self.debug_locations.push(Some(location.to_string()));
-        }
-    }
-
-    /// Extend this data with the data from another [`HTMLData`]
-    pub(crate) fn extend(&mut self, other: &Self) {
-        self.data.extend_from_slice(&other.data);
-        #[cfg(debug_assertions)]
-        {
-            self.debug_types.extend_from_slice(&other.debug_types);
-            self.debug_locations
-                .extend_from_slice(&other.debug_locations);
-        }
-    }
-}

packages/fullstack/src/html_storage/serialize.rs

@@ -1,116 +0,0 @@
-use base64::Engine;
-use dioxus_lib::prelude::dioxus_core::DynamicNode;
-use dioxus_lib::prelude::{has_context, ErrorContext, ScopeId, SuspenseContext, VNode, VirtualDom};
-
-use super::SerializeContext;
-
-impl super::HTMLData {
-    /// Walks through the suspense boundary in a depth first order and extracts the data from the context API.
-    /// We use depth first order instead of relying on the order the hooks are called in because during suspense on the server, the order that futures are run in may be non deterministic.
-    pub(crate) fn extract_from_suspense_boundary(vdom: &VirtualDom, scope: ScopeId) -> Self {
-        let mut data = Self::default();
-        data.serialize_errors(vdom, scope);
-        data.take_from_scope(vdom, scope);
-        data
-    }
-
-    /// Get the errors from the suspense boundary
-    fn serialize_errors(&mut self, vdom: &VirtualDom, scope: ScopeId) {
-        // If there is an error boundary on the suspense boundary, grab the error from the context API
-        // and throw it on the client so that it bubbles up to the nearest error boundary
-        let error = vdom.in_runtime(|| {
-            scope
-                .consume_context::<ErrorContext>()
-                .and_then(|error_context| error_context.errors().first().cloned())
-        });
-        self.push(&error, std::panic::Location::caller());
-    }
-
-    fn take_from_scope(&mut self, vdom: &VirtualDom, scope: ScopeId) {
-        vdom.in_runtime(|| {
-            scope.in_runtime(|| {
-                // Grab any serializable server context from this scope
-                let context: Option<SerializeContext> = has_context();
-                if let Some(context) = context {
-                    self.extend(&context.data.borrow());
-                }
-            });
-        });
-
-        // then continue to any children
-        if let Some(scope) = vdom.get_scope(scope) {
-            // If this is a suspense boundary, move into the children first (even if they are suspended) because that will be run first on the client
-            if let Some(suspense_boundary) =
-                SuspenseContext::downcast_suspense_boundary_from_scope(&vdom.runtime(), scope.id())
-            {
-                if let Some(node) = suspense_boundary.suspended_nodes() {
-                    self.take_from_vnode(vdom, &node);
-                }
-            }
-            if let Some(node) = scope.try_root_node() {
-                self.take_from_vnode(vdom, node);
-            }
-        }
-    }
-
-    fn take_from_vnode(&mut self, vdom: &VirtualDom, vnode: &VNode) {
-        for (dynamic_node_index, dyn_node) in vnode.dynamic_nodes.iter().enumerate() {
-            match dyn_node {
-                DynamicNode::Component(comp) => {
-                    if let Some(scope) = comp.mounted_scope(dynamic_node_index, vnode, vdom) {
-                        self.take_from_scope(vdom, scope.id());
-                    }
-                }
-                DynamicNode::Fragment(nodes) => {
-                    for node in nodes {
-                        self.take_from_vnode(vdom, node);
-                    }
-                }
-                _ => {}
-            }
-        }
-    }
-
-    #[cfg(feature = "server")]
-    /// Encode data as base64. This is intended to be used in the server to send data to the client.
-    pub(crate) fn serialized(&self) -> SerializedHydrationData {
-        let mut serialized = Vec::new();
-        ciborium::into_writer(&self.data, &mut serialized).unwrap();
-
-        let data = base64::engine::general_purpose::STANDARD.encode(serialized);
-
-        let format_js_list_of_strings = |list: &[Option<String>]| {
-            let body = list
-                .iter()
-                .map(|s| match s {
-                    Some(s) => format!(r#""{s}""#),
-                    None => r#""unknown""#.to_string(),
-                })
-                .collect::<Vec<_>>()
-                .join(",");
-            format!("[{}]", body)
-        };
-
-        SerializedHydrationData {
-            data,
-            #[cfg(debug_assertions)]
-            debug_types: format_js_list_of_strings(&self.debug_types),
-            #[cfg(debug_assertions)]
-            debug_locations: format_js_list_of_strings(&self.debug_locations),
-        }
-    }
-}
-
-#[cfg(feature = "server")]
-/// Data that was serialized on the server for hydration on the client. This includes
-/// extra information about the types and sources of the serialized data in debug mode
-pub(crate) struct SerializedHydrationData {
-    /// The base64 encoded serialized data
-    pub data: String,
-    /// A list of the types of each serialized data
-    #[cfg(debug_assertions)]
-    pub debug_types: String,
-    /// A list of the locations of each serialized data
-    #[cfg(debug_assertions)]
-    pub debug_locations: String,
-}

packages/fullstack/src/lib.rs

@@ -4,16 +4,8 @@
 #![deny(missing_docs)]
 #![cfg_attr(docsrs, feature(doc_cfg))]
 
-use std::sync::Arc;
-
 pub use once_cell;
 
-mod html_storage;
-
-#[allow(unused)]
-pub(crate) type ContextProviders =
-    Arc<Vec<Box<dyn Fn() -> Box<dyn std::any::Any> + Send + Sync + 'static>>>;
-
 #[cfg(feature = "axum")]
 #[cfg_attr(docsrs, doc(cfg(feature = "axum")))]
 pub mod server;
@@ -22,8 +14,6 @@ pub mod server;
 #[cfg_attr(docsrs, doc(cfg(feature = "axum_core")))]
 pub mod axum_core;
 
-mod hooks;
-
 pub mod document;
 #[cfg(feature = "server")]
 mod render;
@@ -41,8 +31,7 @@ mod server_context;
 
 /// A prelude of commonly used items in dioxus-fullstack.
 pub mod prelude {
-    use crate::hooks;
-    pub use hooks::{server_cached::use_server_cached, server_future::use_server_future};
+    pub use dioxus_fullstack_hooks::*;
 
     #[cfg(feature = "axum")]
     #[cfg_attr(docsrs, doc(cfg(feature = "axum")))]

packages/fullstack/src/render.rs

@@ -1,11 +1,13 @@
 //! A shared pool of renderers for efficient server side rendering.
 use crate::document::ServerDocument;
-use crate::html_storage::serialize::SerializedHydrationData;
 use crate::streaming::{Mount, StreamingRenderer};
 use dioxus_cli_config::base_path;
+use dioxus_fullstack_hooks::{StreamingContext, StreamingStatus};
+use dioxus_fullstack_protocol::{HydrationContext, SerializedHydrationData};
 use dioxus_interpreter_js::INITIALIZE_STREAMING_JS;
 use dioxus_isrg::{CachedRender, IncrementalRendererError, RenderFreshness};
 use dioxus_lib::document::Document;
+use dioxus_lib::prelude::dioxus_core::DynamicNode;
 use dioxus_router::prelude::ParseRouteError;
 use dioxus_ssr::Renderer;
 use futures_channel::mpsc::Sender;
@@ -51,6 +53,10 @@ where
     }
 }
 
+fn in_root_scope<T>(virtual_dom: &VirtualDom, f: impl FnOnce() -> T) -> T {
+    virtual_dom.in_runtime(|| ScopeId::ROOT.in_runtime(f))
+}
+
 /// Errors that can occur during server side rendering before the initial chunk is sent down
 pub enum SSRError {
     /// An error from the incremental renderer. This should result in a 500 code
@@ -180,7 +186,7 @@ impl SsrRendererPool {
         let myself = self.clone();
         let streaming_mode = cfg.streaming_mode;
 
-        let join_handle = spawn_platform(move || async move {
+        let create_render_future = move || async move {
             let mut virtual_dom = virtual_dom_factory();
             let document = std::rc::Rc::new(crate::document::server::ServerDocument::default());
             virtual_dom.provide_root_context(document.clone());
@@ -196,27 +202,47 @@ impl SsrRendererPool {
             } else {
                 history = dioxus_history::MemoryHistory::with_initial_path(&route);
             }
+            let streaming_context = in_root_scope(&virtual_dom, StreamingContext::new);
             virtual_dom.provide_root_context(Rc::new(history) as Rc<dyn dioxus_history::History>);
             virtual_dom.provide_root_context(document.clone() as std::rc::Rc<dyn Document>);
+            virtual_dom.provide_root_context(streaming_context);
 
-            // rebuild the virtual dom, which may call server_context()
-            with_server_context(server_context.clone(), || virtual_dom.rebuild_in_place());
+            // rebuild the virtual dom
+            virtual_dom.rebuild_in_place();
 
             // If streaming is disabled, wait for the virtual dom to finish all suspense work
             // before rendering anything
             if streaming_mode == StreamingMode::Disabled {
-                ProvideServerContext::new(virtual_dom.wait_for_suspense(), server_context.clone())
-                    .await
+                virtual_dom.wait_for_suspense().await;
             }
+            // Otherwise, just wait for the streaming context to signal the initial chunk is ready
+            else {
+                loop {
+                    // Check if the router has finished and set the streaming context to finished
+                    let streaming_context_finished =
+                        in_root_scope(&virtual_dom, || streaming_context.current_status())
+                            == StreamingStatus::InitialChunkCommitted;
+                    // Or if this app isn't using the router and has finished suspense
+                    let suspense_finished = !virtual_dom.suspended_tasks_remaining();
+                    if streaming_context_finished || suspense_finished {
+                        break;
+                    }
+
+                    // Wait for new async work that runs during suspense (mainly use_server_futures)
+                    virtual_dom.wait_for_suspense_work().await;
+
+                    // Do that async work
+                    virtual_dom.render_suspense_immediate().await;
+                }
+            }
+
             // check if there are any errors
-            let errors = with_server_context(server_context.clone(), || {
-                virtual_dom.in_runtime(|| {
-                    let error_context: ErrorContext = ScopeId::APP
-                        .consume_context()
-                        .expect("The root should be under an error boundary");
-                    let errors = error_context.errors();
-                    errors.to_vec()
-                })
+            let errors = virtual_dom.in_runtime(|| {
+                let error_context: ErrorContext = ScopeId::APP
+                    .consume_context()
+                    .expect("The root should be under an error boundary");
+                let errors = error_context.errors();
+                errors.to_vec()
             });
             if errors.is_empty() {
                 // If routing was successful, we can return a 200 status and render into the stream
@@ -282,16 +308,8 @@ impl SsrRendererPool {
 
             // After the initial render, we need to resolve suspense
             while virtual_dom.suspended_tasks_remaining() {
-                ProvideServerContext::new(
-                    virtual_dom.wait_for_suspense_work(),
-                    server_context.clone(),
-                )
-                .await;
-                let resolved_suspense_nodes = ProvideServerContext::new(
-                    virtual_dom.render_suspense_immediate(),
-                    server_context.clone(),
-                )
-                .await;
+                virtual_dom.wait_for_suspense_work().await;
+                let resolved_suspense_nodes = virtual_dom.render_suspense_immediate().await;
 
                 // Just rerender the resolved nodes
                 for scope in resolved_suspense_nodes {
@@ -369,6 +387,10 @@ impl SsrRendererPool {
 
             renderer.reset_render_components();
             myself.renderers.write().unwrap().push(renderer);
+        };
+
+        let join_handle = spawn_platform(move || {
+            ProvideServerContext::new(create_render_future(), server_context)
         });
 
         // Wait for the initial result which determines the status code
@@ -464,13 +486,83 @@ fn start_capturing_errors(suspense_scope: ScopeId) {
 fn serialize_server_data(virtual_dom: &VirtualDom, scope: ScopeId) -> SerializedHydrationData {
     // After we replace the placeholder in the dom with javascript, we need to send down the resolved data so that the client can hydrate the node
     // Extract any data we serialized for hydration (from server futures)
-    let html_data =
-        crate::html_storage::HTMLData::extract_from_suspense_boundary(virtual_dom, scope);
+    let html_data = extract_from_suspense_boundary(virtual_dom, scope);
 
     // serialize the server state into a base64 string
     html_data.serialized()
 }
 
+/// Walks through the suspense boundary in a depth first order and extracts the data from the context API.
+/// We use depth first order instead of relying on the order the hooks are called in because during suspense on the server, the order that futures are run in may be non deterministic.
+pub(crate) fn extract_from_suspense_boundary(
+    vdom: &VirtualDom,
+    scope: ScopeId,
+) -> HydrationContext {
+    let data = HydrationContext::default();
+    serialize_errors(&data, vdom, scope);
+    take_from_scope(&data, vdom, scope);
+    data
+}
+
+/// Get the errors from the suspense boundary
+fn serialize_errors(context: &HydrationContext, vdom: &VirtualDom, scope: ScopeId) {
+    // If there is an error boundary on the suspense boundary, grab the error from the context API
+    // and throw it on the client so that it bubbles up to the nearest error boundary
+    let error = vdom.in_runtime(|| {
+        scope
+            .consume_context::<ErrorContext>()
+            .and_then(|error_context| error_context.errors().first().cloned())
+    });
+    context
+        .error_entry()
+        .insert(&error, std::panic::Location::caller());
+}
+
+fn take_from_scope(context: &HydrationContext, vdom: &VirtualDom, scope: ScopeId) {
+    vdom.in_runtime(|| {
+        scope.in_runtime(|| {
+            // Grab any serializable server context from this scope
+            let other: Option<HydrationContext> = has_context();
+            if let Some(other) = other {
+                context.extend(&other);
+            }
+        });
+    });
+
+    // then continue to any children
+    if let Some(scope) = vdom.get_scope(scope) {
+        // If this is a suspense boundary, move into the children first (even if they are suspended) because that will be run first on the client
+        if let Some(suspense_boundary) =
+            SuspenseContext::downcast_suspense_boundary_from_scope(&vdom.runtime(), scope.id())
+        {
+            if let Some(node) = suspense_boundary.suspended_nodes() {
+                take_from_vnode(context, vdom, &node);
+            }
+        }
+        if let Some(node) = scope.try_root_node() {
+            take_from_vnode(context, vdom, node);
+        }
+    }
+}
+
+fn take_from_vnode(context: &HydrationContext, vdom: &VirtualDom, vnode: &VNode) {
+    for (dynamic_node_index, dyn_node) in vnode.dynamic_nodes.iter().enumerate() {
+        match dyn_node {
+            DynamicNode::Component(comp) => {
+                if let Some(scope) = comp.mounted_scope(dynamic_node_index, vnode, vdom) {
+                    take_from_scope(context, vdom, scope.id());
+                }
+            }
+            DynamicNode::Fragment(nodes) => {
+                for node in nodes {
+                    take_from_vnode(context, vdom, node);
+                }
+            }
+            _ => {}
+        }
+    }
+}
+
 /// State used in server side rendering. This utilizes a pool of [`dioxus_ssr::Renderer`]s to cache static templates between renders.
 #[derive(Clone)]
 pub struct SSRState {

packages/fullstack/src/serve_config.rs

@@ -8,7 +8,9 @@ use std::io::Read;
 use std::path::PathBuf;
 use std::sync::Arc;
 
-use crate::ContextProviders;
+#[allow(unused)]
+pub(crate) type ContextProviders =
+    Arc<Vec<Box<dyn Fn() -> Box<dyn std::any::Any> + Send + Sync + 'static>>>;
 
 /// A ServeConfig is used to configure how to serve a Dioxus application. It contains information about how to serve static assets, and what content to render with [`dioxus-ssr`].
 #[derive(Clone, Default)]
@@ -486,6 +488,8 @@ pub enum StreamingMode {
 pub struct ServeConfig {
     pub(crate) index: IndexHtml,
     pub(crate) incremental: Option<dioxus_isrg::IncrementalRendererConfig>,
+    // This is used in the axum integration
+    #[allow(unused)]
     pub(crate) context_providers: ContextProviders,
     pub(crate) streaming_mode: StreamingMode,
 }

packages/fullstack/src/server_context.rs

@@ -23,9 +23,10 @@ type SendSyncAnyMap = std::collections::HashMap<std::any::TypeId, ContextType>;
 /// ```
 #[derive(Clone)]
 pub struct DioxusServerContext {
-    shared_context: std::sync::Arc<RwLock<SendSyncAnyMap>>,
-    response_parts: std::sync::Arc<RwLock<http::response::Parts>>,
+    shared_context: Arc<RwLock<SendSyncAnyMap>>,
+    response_parts: Arc<RwLock<http::response::Parts>>,
     pub(crate) parts: Arc<RwLock<http::request::Parts>>,
+    response_sent: Arc<std::sync::atomic::AtomicBool>,
 }
 
 enum ContextType {
@@ -46,11 +47,12 @@ impl ContextType {
 impl Default for DioxusServerContext {
     fn default() -> Self {
         Self {
-            shared_context: std::sync::Arc::new(RwLock::new(HashMap::new())),
-            response_parts: std::sync::Arc::new(RwLock::new(
+            shared_context: Arc::new(RwLock::new(HashMap::new())),
+            response_parts: Arc::new(RwLock::new(
                 http::response::Response::new(()).into_parts().0,
             )),
-            parts: std::sync::Arc::new(RwLock::new(http::request::Request::new(()).into_parts().0)),
+            parts: Arc::new(RwLock::new(http::request::Request::new(()).into_parts().0)),
+            response_sent: Arc::new(std::sync::atomic::AtomicBool::new(false)),
         }
     }
 }
@@ -69,6 +71,7 @@ mod server_fn_impl {
                 response_parts: std::sync::Arc::new(RwLock::new(
                     http::response::Response::new(()).into_parts().0,
                 )),
+                response_sent: Arc::new(std::sync::atomic::AtomicBool::new(false)),
             }
         }
 
@@ -81,6 +84,7 @@ mod server_fn_impl {
                 response_parts: std::sync::Arc::new(RwLock::new(
                     http::response::Response::new(()).into_parts().0,
                 )),
+                response_sent: Arc::new(std::sync::atomic::AtomicBool::new(false)),
             }
         }
 
@@ -192,6 +196,14 @@ mod server_fn_impl {
         /// }
         /// ```
         pub fn response_parts_mut(&self) -> RwLockWriteGuard<'_, http::response::Parts> {
+            if self
+                .response_sent
+                .load(std::sync::atomic::Ordering::Relaxed)
+            {
+                tracing::error!("Attempted to modify the request after the first frame of the response has already been sent. \
+                You can read the response, but modifying the response will not change the response that the client has already received. \
+                Try modifying the response before the suspense boundary above the router is resolved.");
+            }
             self.response_parts.write()
         }
 
@@ -261,6 +273,22 @@ mod server_fn_impl {
         pub async fn extract<M, T: FromServerContext<M>>(&self) -> Result<T, T::Rejection> {
             T::from_request(self).await
         }
+
+        /// Copy the response parts to a response and mark this server context as sent
+        #[cfg(feature = "axum")]
+        pub(crate) fn send_response<B>(&self, response: &mut http::response::Response<B>) {
+            self.response_sent
+                .store(true, std::sync::atomic::Ordering::Relaxed);
+            let parts = self.response_parts.read();
+
+            let mut_headers = response.headers_mut();
+            for (key, value) in parts.headers.iter() {
+                mut_headers.insert(key, value.clone());
+            }
+            *response.status_mut() = parts.status;
+            *response.version_mut() = parts.version;
+            response.extensions_mut().extend(parts.extensions.clone());
+        }
     }
 }
 

packages/fullstack/src/streaming.rs

@@ -26,6 +26,7 @@
 //! </script>
 //! ```
 
+use dioxus_fullstack_protocol::SerializedHydrationData;
 use futures_channel::mpsc::Sender;
 
 use std::{
@@ -33,8 +34,6 @@ use std::{
     sync::{Arc, RwLock},
 };
 
-use crate::html_storage::serialize::SerializedHydrationData;
-
 /// Sections are identified by a unique id based on the suspense path. We only track the path of suspense boundaries because the client may render different components than the server.
 #[derive(Clone, Debug, Default)]
 struct MountPath {
@@ -127,10 +126,10 @@ impl<E> StreamingRenderer<E> {
         // 2. The serialized data required to hydrate those components
         // 3. (in debug mode) The type names of the serialized data
         // 4. (in debug mode) The locations of the serialized data
-        let raw_data = resolved_data.data;
         write!(
             into,
-            r#"</div><script>window.dx_hydrate([{id}], "{raw_data}""#
+            r#"</div><script>window.dx_hydrate([{id}], "{}""#,
+            resolved_data.data
         )?;
         #[cfg(debug_assertions)]
         {

packages/hooks/src/lib.rs

@@ -95,3 +95,6 @@ pub use use_signal::*;
 
 mod use_set_compare;
 pub use use_set_compare::*;
+
+mod use_after_suspense_resolved;
+pub use use_after_suspense_resolved::*;

packages/hooks/src/use_after_suspense_resolved.rs

@@ -0,0 +1,20 @@
+use dioxus_core::{prelude::suspense_context, use_hook};
+
+/// Run a closure after the suspense boundary this is under is resolved. The
+/// closure will be run immediately if the suspense boundary is already resolved
+/// or the scope is not under a suspense boundary.
+pub fn use_after_suspense_resolved(suspense_resolved: impl FnOnce() + 'static) {
+    use_hook(|| {
+        // If this is under a suspense boundary, we need to check if it is resolved
+        match suspense_context() {
+            Some(context) => {
+                // If it is suspended, run the closure after the suspense is resolved
+                context.after_suspense_resolved(suspense_resolved)
+            }
+            None => {
+                // Otherwise, just run the resolved closure immediately
+                suspense_resolved();
+            }
+        }
+    })
+}

packages/playwright-tests/fullstack/src/main.rs

@@ -107,6 +107,9 @@ async fn server_error() -> Result<String, ServerFnError> {
 
 #[component]
 fn Errors() -> Element {
+    // Make the suspense boundary below happen during streaming
+    use_hook(commit_initial_chunk);
+
     rsx! {
         // This is a tricky case for suspense https://github.com/DioxusLabs/dioxus/issues/2570
         // Root suspense boundary is already resolved when the inner suspense boundary throws an error.
@@ -132,7 +135,7 @@ fn Errors() -> Element {
 pub fn ThrowsError() -> Element {
     use_server_future(server_error)?
         .unwrap()
-        .map_err(|err| RenderError::Aborted(CapturedError::from_display(err)))?;
+        .map_err(CapturedError::from_display)?;
     rsx! {
         "success"
     }

packages/playwright-tests/nested-suspense/src/lib.rs

@@ -11,6 +11,9 @@ use dioxus::prelude::*;
 use serde::{Deserialize, Serialize};
 
 pub fn app() -> Element {
+    // Start streaming immediately
+    use_hook(commit_initial_chunk);
+
     rsx! {
         SuspenseBoundary {
             fallback: move |_| rsx! {},

packages/playwright-tests/suspense-carousel/src/main.rs

@@ -9,6 +9,8 @@ use dioxus::prelude::*;
 use serde::{Deserialize, Serialize};
 
 fn app() -> Element {
+    // Start streaming immediately
+    use_hook(commit_initial_chunk);
     let mut count = use_signal(|| 0);
 
     rsx! {

packages/playwright-tests/test-results/.last-run.json

@@ -0,0 +1,8 @@
+{
+  "status": "interrupted",
+  "failedTests": [
+    "d630e8b735ec4c8447b5-3853da72eac8a6a9a3b7",
+    "ff750809a07139231c1d-e791c1c230e601a8bc52",
+    "7d44990a3cf257f22406-5c4d478bb363aff6da09"
+  ]
+}

packages/router/Cargo.toml

@@ -13,6 +13,7 @@ keywords = ["dom", "ui", "gui", "react", "wasm"]
 dioxus-lib = { workspace = true }
 dioxus-history = { workspace = true }
 dioxus-router-macro = { workspace = true }
+dioxus-fullstack-hooks = { workspace = true, optional = true }
 tracing = { workspace = true }
 urlencoding = "2.1.3"
 url = "2.3.1"
@@ -21,6 +22,7 @@ rustversion = "1.0.17"
 
 [features]
 default = []
+streaming = ["dep:dioxus-fullstack-hooks"]
 wasm-split = []
 
 [dev-dependencies]

packages/router/src/components/router.rs

@@ -44,6 +44,11 @@ pub fn Router<R: Routable + Clone>(props: RouterProps<R>) -> Element {
         provide_router_context(RouterContext::new(props.config.call(())));
     });
 
+    #[cfg(feature = "streaming")]
+    use_after_suspense_resolved(|| {
+        dioxus_fullstack_hooks::commit_initial_chunk();
+    });
+
     use_hook(|| {
         provide_context(OutletContext::<R>::new());
     });

packages/web/Cargo.toml

@@ -22,6 +22,7 @@ dioxus-interpreter-js = { workspace = true, features = [
     "minimal_bindings",
     "webonly",
 ] }
+dioxus-fullstack-protocol = { workspace = true, features = ["web"], optional = true }
 generational-box = { workspace = true }
 
 js-sys = "0.3.70"
@@ -39,7 +40,6 @@ serde_json = { version = "1.0", optional = true }
 serde = { version = "1.0", optional = true }
 serde-wasm-bindgen = { version = "0.5.0", optional = true }
 
-ciborium = { workspace = true, optional = true }
 async-trait = { version = "0.1.58", optional = true }
 
 [dependencies.web-sys]
@@ -86,7 +86,7 @@ lazy-js-bundle = { workspace = true }
 
 [features]
 default = ["mounted", "file_engine", "devtools", "document"]
-hydrate = ["web-sys/Comment", "ciborium", "dep:serde"]
+hydrate = ["web-sys/Comment", "dep:serde", "dep:dioxus-fullstack-protocol"]
 mounted = [
     "web-sys/Element",
     "dioxus-html/mounted",

packages/web/src/hydration/deserialize.rs

@@ -1,161 +0,0 @@
-use std::cell::{Cell, RefCell};
-use std::io::Cursor;
-
-use dioxus_core::CapturedError;
-use serde::de::DeserializeOwned;
-
-thread_local! {
-    static SERVER_DATA: RefCell<Option<HTMLDataCursor>> = const { RefCell::new(None) };
-}
-
-/// Try to take the next item from the server data cursor. This will only be set during the first run of a component before hydration.
-/// This will return `None` if no data was pushed for this instance or if serialization fails
-// TODO: evan better docs
-#[track_caller]
-pub fn take_server_data<T: DeserializeOwned>() -> Result<Option<T>, TakeDataError> {
-    SERVER_DATA.with_borrow(|data| match data.as_ref() {
-        Some(data) => data.take(),
-        None => Err(TakeDataError::DataNotAvailable),
-    })
-}
-
-/// Run a closure with the server data
-pub(crate) fn with_server_data<O>(server_data: HTMLDataCursor, f: impl FnOnce() -> O) -> O {
-    // Set the server data that will be used during hydration
-    set_server_data(server_data);
-    let out = f();
-    // Hydrating the suspense node **should** eat all the server data, but just in case, remove it
-    remove_server_data();
-    out
-}
-
-fn set_server_data(data: HTMLDataCursor) {
-    SERVER_DATA.with_borrow_mut(|server_data| *server_data = Some(data));
-}
-
-fn remove_server_data() {
-    SERVER_DATA.with_borrow_mut(|server_data| server_data.take());
-}
-
-/// Data that is deserialized from the server during hydration
-pub(crate) struct HTMLDataCursor {
-    error: Option<CapturedError>,
-    data: Vec<Option<Vec<u8>>>,
-    #[cfg(debug_assertions)]
-    debug_types: Option<Vec<String>>,
-    #[cfg(debug_assertions)]
-    debug_locations: Option<Vec<String>>,
-    index: Cell<usize>,
-}
-
-impl HTMLDataCursor {
-    pub(crate) fn from_serialized(
-        data: &[u8],
-        debug_types: Option<Vec<String>>,
-        debug_locations: Option<Vec<String>>,
-    ) -> Self {
-        let deserialized = ciborium::from_reader(Cursor::new(data)).unwrap();
-        Self::new(deserialized, debug_types, debug_locations)
-    }
-
-    /// Get the error if there is one
-    pub(crate) fn error(&self) -> Option<CapturedError> {
-        self.error.clone()
-    }
-
-    fn new(
-        data: Vec<Option<Vec<u8>>>,
-        #[allow(unused)] debug_types: Option<Vec<String>>,
-        #[allow(unused)] debug_locations: Option<Vec<String>>,
-    ) -> Self {
-        let mut myself = Self {
-            index: Cell::new(0),
-            error: None,
-            data,
-            #[cfg(debug_assertions)]
-            debug_types,
-            #[cfg(debug_assertions)]
-            debug_locations,
-        };
-
-        // The first item is always an error if it exists
-        let error = myself
-            .take::<Option<CapturedError>>()
-            .ok()
-            .flatten()
-            .flatten();
-
-        myself.error = error;
-
-        myself
-    }
-
-    #[track_caller]
-    pub fn take<T: DeserializeOwned>(&self) -> Result<Option<T>, TakeDataError> {
-        let current = self.index.get();
-        if current >= self.data.len() {
-            tracing::trace!(
-                "Tried to take more data than was available, len: {}, index: {}; This is normal if the server function was started on the client, but may indicate a bug if the server function result should be deserialized from the server",
-                self.data.len(),
-                current
-            );
-            return Err(TakeDataError::DataNotAvailable);
-        }
-        let bytes = self.data[current].as_ref();
-        self.index.set(current + 1);
-        match bytes {
-            Some(bytes) => match ciborium::from_reader(Cursor::new(bytes)) {
-                Ok(x) => Ok(Some(x)),
-                Err(err) => {
-                    #[cfg(debug_assertions)]
-                    {
-                        let debug_type = self
-                            .debug_types
-                            .as_ref()
-                            .and_then(|types| types.get(current));
-                        let debug_locations = self
-                            .debug_locations
-                            .as_ref()
-                            .and_then(|locations| locations.get(current));
-
-                        if let (Some(debug_type), Some(debug_locations)) =
-                            (debug_type, debug_locations)
-                        {
-                            let client_type = std::any::type_name::<T>();
-                            let client_location = std::panic::Location::caller();
-                            // We we have debug types and a location, we can provide a more helpful error message
-                            tracing::error!(
-                                "Error deserializing data: {err:?}\n\nThis type was serialized on the server at {debug_locations} with the type name {debug_type}. The client failed to deserialize the type {client_type} at {client_location}.",
-                            );
-                            return Err(TakeDataError::DeserializationError(err));
-                        }
-                    }
-                    // Otherwise, just log the generic deserialization error
-                    tracing::error!("Error deserializing data: {:?}", err);
-                    Err(TakeDataError::DeserializationError(err))
-                }
-            },
-            None => Ok(None),
-        }
-    }
-}
-
-/// An error that can occur when trying to take data from the server
-#[derive(Debug)]
-pub enum TakeDataError {
-    /// Deserializing the data failed
-    DeserializationError(ciborium::de::Error<std::io::Error>),
-    /// No data was available
-    DataNotAvailable,
-}
-
-impl std::fmt::Display for TakeDataError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            Self::DeserializationError(e) => write!(f, "DeserializationError: {}", e),
-            Self::DataNotAvailable => write!(f, "DataNotAvailable"),
-        }
-    }
-}
-
-impl std::error::Error for TakeDataError {}

packages/web/src/hydration/hydrate.rs

@@ -4,11 +4,10 @@
 //! 3. Register a callback for dx_hydrate(id, data) that takes some new data, reruns the suspense boundary with that new data and then rehydrates the node
 
 use crate::dom::WebsysDom;
-use crate::with_server_data;
-use crate::HTMLDataCursor;
 use dioxus_core::prelude::*;
 use dioxus_core::AttributeValue;
 use dioxus_core::{DynamicNode, ElementId};
+use dioxus_fullstack_protocol::HydrationContext;
 use futures_channel::mpsc::UnboundedReceiver;
 use std::fmt::Write;
 use RehydrationError::*;
@@ -146,12 +145,12 @@ impl WebsysDom {
         #[cfg(not(debug_assertions))]
         let debug_locations = None;
 
-        let server_data = HTMLDataCursor::from_serialized(&data, debug_types, debug_locations);
+        let server_data = HydrationContext::from_serialized(&data, debug_types, debug_locations);
         // If the server serialized an error into the suspense boundary, throw it on the client so that it bubbles up to the nearest error boundary
-        if let Some(error) = server_data.error() {
+        if let Some(error) = server_data.error_entry().get().ok().flatten() {
             dom.in_runtime(|| id.throw_error(error));
         }
-        with_server_data(server_data, || {
+        server_data.in_context(|| {
             // rerun the scope with the new data
             SuspenseBoundaryProps::resolve_suspense(
                 id,

packages/web/src/hydration/mod.rs

@@ -1,10 +1,6 @@
 #[cfg(feature = "hydrate")]
-mod deserialize;
-#[cfg(feature = "hydrate")]
 mod hydrate;
 
-#[cfg(feature = "hydrate")]
-pub use deserialize::*;
 #[cfg(feature = "hydrate")]
 #[allow(unused)]
 pub use hydrate::*;

packages/web/src/lib.rs

@@ -81,6 +81,8 @@ pub async fn run(mut virtual_dom: VirtualDom, web_config: Config) -> ! {
     if should_hydrate {
         #[cfg(feature = "hydrate")]
         {
+            use dioxus_fullstack_protocol::HydrationContext;
+
             websys_dom.skip_mutations = true;
             // Get the initial hydration data from the client
             #[wasm_bindgen::prelude::wasm_bindgen(inline_js = r#"
@@ -113,12 +115,12 @@ pub async fn run(mut virtual_dom: VirtualDom, web_config: Config) -> ! {
             let debug_locations = None;
 
             let server_data =
-                HTMLDataCursor::from_serialized(&hydration_data, debug_types, debug_locations);
+                HydrationContext::from_serialized(&hydration_data, debug_types, debug_locations);
             // If the server serialized an error into the root suspense boundary, throw it into the root scope
-            if let Some(error) = server_data.error() {
+            if let Some(error) = server_data.error_entry().get().ok().flatten() {
                 virtual_dom.in_runtime(|| dioxus_core::ScopeId::APP.throw_error(error));
             }
-            with_server_data(server_data, || {
+            server_data.in_context(|| {
                 virtual_dom.rebuild(&mut websys_dom);
             });
             websys_dom.skip_mutations = false;