水合

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>>,
}

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::has_context()
            .unwrap_or_else(|| dioxus_core::provide_context(HydrationContext::default()))
    }
}

    /// 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();
        Self::serialize_errors(&data, vdom, scope);
        Self::take_from_scope(&data, vdom, scope);
        data
    }

#[component]
fn Named(name: String) -> Element {
  println!("run {name}");
  rsx! { "{name}" }
}

fn app() -> Element {
  rsx! {
    // two components inside one root element
    div {
      Named { name: "A" }
      Named { name: "B" }
    }
    // two components as roots of the same template
    Named { name: "C" }
    Named { name: "D" }
  }
}

fn main() {
  let mut dom = VirtualDom::new(app);
  dom.rebuild_in_place();
  println!("{}", dioxus_ssr::render(&dom));
}

run B
run A
run C
run D
<div>AB</div>CD

            server_data.in_context(|| {
                virtual_dom.in_scope(ScopeId::ROOT, || {
                    // Provide a hydration compatible create error boundary method
                    dioxus_core::provide_create_error_boundary(
                        dioxus_fullstack_core::init_error_boundary,
                    );
                    #[cfg(feature = "document")]
                    document::init_fullstack_document();
                });
                virtual_dom.rebuild(&mut websys_dom);
            });

            #[cfg(feature = "web")]
            match initial_web_result.take() {
                // The data was deserialized successfully from the server
                Some(Ok(o)) => return o,

                // The data is still pending from the server. Don't try to resolve it on the client
                Some(Err(crate::transport::TakeDataError::DataPending)) => {
                    std::future::pending::<()>().await
                }

                // The data was not available on the server, rerun the future
                Some(Err(_)) => {}

                // This isn't the first run, so we don't need do anything
                None => {}
            }

  hydrate_node(hydrateNode: HTMLElement, ids: { [key: number]: number }) {
    const hydration = hydrateNode.getAttribute("data-node-hydration");
    const split = hydration!.split(",");
    const id = ids[parseInt(split[0])];

    this.nodes[id] = hydrateNode;

    if (split.length > 1) {
      // @ts-ignore
      hydrateNode.listening = split.length - 1;
      hydrateNode.setAttribute("data-dioxus-id", id.toString());

#[component]
fn Swap() -> Element {
  // server: i32 then String; client: String then i32
  #[cfg(feature = "server")]
  let (n, w) = {
    let n = use_server_future(num)?;
    let w = use_server_future(word)?;
    (n, w)
  };
  #[cfg(not(feature = "server"))]
  let (n, w) = {
    let w = use_server_future(word)?;
    let n = use_server_future(num)?;
    (n, w)
  };
  rsx! {
    p { id: "out", "n = {n():?}, w = {w():?}" }
    button { id: "inc", onclick: move |_| {}, "+" }
  }
}

#[component]
fn Swap2() -> Element {
  // same type on both slots, opposite order on the client
  let mut clicks = use_signal(|| 0);
  #[cfg(feature = "server")]
  let (a, b) = {
    let a = use_server_future(|| sleep_ms(10))?;
    let b = use_server_future(|| sleep_ms(20))?;
    (a, b)
  };
  #[cfg(not(feature = "server"))]
  let (a, b) = {
    let b = use_server_future(|| sleep_ms(20))?;
    let a = use_server_future(|| sleep_ms(10))?;
    (a, b)
  };
  rsx! {
    p { id: "out", "a = {a():?}, b = {b():?}, clicks = {clicks}" }
    button { id: "inc", onclick: move |_| clicks += 1, "+" }
  }
}

=== swap (release)
[net] GET /swap
[net] GET /assets/exp-dioxus-fs1-fs-dxhb955d2e33fde5fe5.js
[net] GET /assets/exp-dioxus-fs1-fs_bg-dxhd9dbd27f8dd2b5f8.wasm
[net] GET /favicon.ico
[console.log] ERROR ~/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-fullstack-core-0.7.10/src/transport.rs:306 Error deserializing data: Semantic(None, "invalid type: integer `1`, expected string")
[net] GET /api/word
[console.error] wasm-bindgen: imported JS function that was not marked as `catch` threw an error: Cannot read properties of undefined (reading 'toString')

Stack:
TypeError: Cannot read properties of undefined (reading 'toString')
    at U.hydrate_node (http://127.0.0.1:18790/assets/exp-dioxus-fs1-fs-dxhb955d2e33fde5fe5.js:1:4061)
    at U.hydrate (http://127.0.0.1:18790/assets/exp-dioxus-fs1-fs-dxhb955d2e33fde5fe5.js:1:4397)
    ...
[exception] TypeError: Cannot read properties of undefined (reading 'toString')
    at U.hydrate_node (http://127.0.0.1:18790/assets/exp-dioxus-fs1-fs-dxhb955d2e33fde5fe5.js:1:4061)
    ...
#out after hydration: <p id="out" data-node-hydration="0"><!--node-id1-->n = Some(Ok(1)), w = Some(Ok("two"))<!--#--></p>
#out after click: <p id="out" data-node-hydration="0"><!--node-id1-->n = Some(Ok(1)), w = Some(Ok("two"))<!--#--></p>
=== swap2 (release)
[net] GET /swap2
[net] GET /assets/exp-dioxus-fs1-fs-dxhb955d2e33fde5fe5.js
[net] GET /assets/exp-dioxus-fs1-fs_bg-dxhd9dbd27f8dd2b5f8.wasm
#out after hydration: <p id="out" data-node-hydration="0">a = Some(Ok(10)), b = Some(Ok(20)), clicks = 0</p>
#out after click: <p id="out" data-node-hydration="0">a = Some(Ok(20)), b = Some(Ok(10)), clicks = 1</p>

<script>window.initial_dioxus_hydration_data="hYEY9oYYZRgvGHMYdxhhGHD2hRihGGIYTxhrAYgYoRhiGE8YaxhjGHQYdxhv";window.initial_dioxus_hydration_debug_types=["core::option::Option<dioxus_core::render_error::CapturedError>","unknown","alloc::string::String","unknown","unknown","unknown","core::result::Result<i32, dioxus_fullstack_core::error::ServerFnError>","core::result::Result<alloc::string::String, dioxus_fullstack_core::error::ServerFnError>"];window.initial_dioxus_hydration_debug_locations=["~/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-server-0.7.10/src/ssr.rs:556:29","unknown","~/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-fullstack-core-0.7.10/src/history.rs:44:30","unknown","unknown","unknown","src/main.rs:122:13","src/main.rs:123:13"];</script>

[console.log] ERROR ~/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-fullstack-core-0.7.10/src/transport.rs:299 Error deserializing data: Semantic(None, "invalid type: integer `1`, expected string")

This type was serialized on the server at unknown with the type name unknown. The client failed to deserialize the type core::result::Result<alloc::string::String, dioxus_fullstack_core::error::ServerFnError> at ~/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-fullstack-core-0.7.10/src/transport.rs:297:51.

        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);

use base64::Engine;
use dioxus_fullstack_core::HydrationContext;
use std::panic::Location;

fn scope_ctx(value: i32) -> HydrationContext {
  // a scope with one use_server_future: its own context, entries start at index 1
  let ctx = HydrationContext::default();
  ctx.create_entry::<i32>().insert(&value, Location::caller());
  ctx
}

fn main() {
  let merged = HydrationContext::default();
  merged.error_entry().insert(&None, Location::caller());
  merged.extend(&scope_ctx(10));
  merged.extend(&scope_ctx(20));
  let out = merged.serialized();
  let bytes = base64::engine::general_purpose::STANDARD.decode(&out.data).unwrap();
  let slots: Vec<Option<Vec<u8>>> = ciborium::from_reader(&bytes[..]).unwrap();
  for (i, slot) in slots.iter().enumerate() {
    let shown = match slot {
      Some(b) => {
        let v: ciborium::Value = ciborium::from_reader(&b[..]).unwrap();
        format!("{v:?}")
      }
      None => "None".to_string(),
    };
    println!("data[{i}] = {shown}");
  }
  println!("debug_types     = {}", out.debug_types);
  println!("debug_locations = {}", out.debug_locations);
}

data[0] = Null
data[1] = Integer(Integer(10))
data[2] = Integer(Integer(20))
debug_types     = ["core::option::Option<dioxus_core::render_error::CapturedError>","unknown","i32","unknown","i32"]
debug_locations = ["src/bin/extend_drift.rs:17:38","unknown","src/bin/extend_drift.rs:11:44","unknown","src/bin/extend_drift.rs:11:44"]

#out after hydration: <p id="out" data-node-hydration="0">a = Some(Ok(10)), b = Some(Ok(20)), clicks = 0</p>
#out after click: <p id="out" data-node-hydration="0">a = Some(Ok(20)), b = Some(Ok(10)), clicks = 1</p>