fix hydration after suspense

packages/ssr/src/cache.rs

@@ -28,9 +28,9 @@ pub enum Segment {
     /// A marker for where to insert a dynamic inner html
     InnerHtmlMarker,
     /// A marker for where to insert a node id for an attribute
-    AttributeNodeMarker(usize),
+    AttributeNodeMarker,
     /// A marker for where to insert a node id for a root node
-    RootNodeMarker(usize),
+    RootNodeMarker,
 }
 
 impl std::fmt::Write for StringChain {
@@ -82,7 +82,7 @@ impl StringCache {
                 // we need to collect the inner html and write it at the end
                 let mut inner_html = None;
                 // we need to keep track of if we have dynamic attrs to know if we need to insert a style and inner_html marker
-                let mut last_dyn_attr_id = None;
+                let mut has_dyn_attrs = false;
                 for attr in *attrs {
                     match attr {
                         TemplateAttribute::Static {
@@ -105,7 +105,7 @@ impl StringCache {
                         TemplateAttribute::Dynamic { id: index } => {
                             let index = *index;
                             chain.segments.push(Segment::Attr(index));
-                            last_dyn_attr_id = Some(index);
+                            has_dyn_attrs = true
                         }
                     }
                 }
@@ -120,21 +120,19 @@ impl StringCache {
                         inside_style_tag: true,
                     });
                     write!(chain, "\"")?;
-                } else if last_dyn_attr_id.is_some() {
+                } else if has_dyn_attrs {
                     chain.segments.push(Segment::StyleMarker {
                         inside_style_tag: false,
                     });
                 }
 
                 // write the id if we are prerendering and this is either a root node or a node with a dynamic attribute
-                if prerender {
+                if prerender && (has_dyn_attrs || is_root) {
                     write!(chain, " data-node-hydration=\"")?;
-                    if let Some(last_dyn_attr_id) = last_dyn_attr_id {
-                        chain
-                            .segments
-                            .push(Segment::AttributeNodeMarker(last_dyn_attr_id));
+                    if has_dyn_attrs {
+                        chain.segments.push(Segment::AttributeNodeMarker);
                     } else if is_root {
-                        chain.segments.push(Segment::RootNodeMarker(root_idx));
+                        chain.segments.push(Segment::RootNodeMarker);
                     }
                     write!(chain, "\"")?;
                 }
@@ -146,7 +144,7 @@ impl StringCache {
                     // Write the static inner html, or insert a marker if dynamic inner html is possible
                     if let Some(inner_html) = inner_html {
                         chain.write_str(inner_html)?;
-                    } else if last_dyn_attr_id.is_some() {
+                    } else if has_dyn_attrs {
                         chain.segments.push(Segment::InnerHtmlMarker);
                     }
 

packages/ssr/src/renderer.rs

@@ -28,6 +28,9 @@ pub struct Renderer {
 
     /// A cache of templates that have been rendered
     template_cache: HashMap<&'static str, Arc<StringCache>>,
+
+    /// The current dynamic node id for hydration
+    dynamic_node_id: usize,
 }
 
 impl Renderer {
@@ -54,6 +57,7 @@ impl Renderer {
         // We should never ever run into async or errored nodes in SSR
         // Error boundaries and suspense boundaries will convert these to sync
         if let RenderReturn::Ready(node) = dom.get_scope(scope).unwrap().root_node() {
+            self.dynamic_node_id = 0;
             self.render_template(buf, dom, node)?
         };
 
@@ -127,10 +131,8 @@ impl Renderer {
                     DynamicNode::Text(text) => {
                         // in SSR, we are concerned that we can't hunt down the right text node since they might get merged
                         if self.pre_render {
-                            let node_id = text
-                                .mounted_element()
-                                .expect("Text nodes must be mounted before rendering");
-                            write!(buf, "<!--node-id{}-->", node_id.0)?;
+                            write!(buf, "<!--node-id{}-->", self.dynamic_node_id)?;
+                            self.dynamic_node_id += 1;
                         }
 
                         write!(
@@ -149,12 +151,14 @@ impl Renderer {
                         }
                     }
 
-                    DynamicNode::Placeholder(el) => {
+                    DynamicNode::Placeholder(_) => {
                         if self.pre_render {
-                            let id = el
-                                .mounted_element()
-                                .expect("Elements must be mounted before rendering");
-                            write!(buf, "<pre data-node-hydration={}></pre>", id.0)?;
+                            write!(
+                                buf,
+                                "<pre data-node-hydration={}></pre>",
+                                self.dynamic_node_id
+                            )?;
+                            self.dynamic_node_id += 1;
                         }
                     }
                 },
@@ -194,10 +198,10 @@ impl Renderer {
                     }
                 }
 
-                Segment::AttributeNodeMarker(idx) => {
-                    let id = template.dynamic_attrs[*idx].mounted_element();
+                Segment::AttributeNodeMarker => {
                     // first write the id
-                    write!(buf, "{}", id.0)?;
+                    write!(buf, "{}", self.dynamic_node_id)?;
+                    self.dynamic_node_id += 1;
                     // then write any listeners
                     for name in accumulated_listeners.drain(..) {
                         write!(buf, ",{}:", &name[2..])?;
@@ -205,9 +209,9 @@ impl Renderer {
                     }
                 }
 
-                Segment::RootNodeMarker(idx) => {
-                    let id = template.root_ids.borrow()[*idx];
-                    write!(buf, "{}", id.0)?;
+                Segment::RootNodeMarker => {
+                    write!(buf, "{}", self.dynamic_node_id)?;
+                    self.dynamic_node_id += 1
                 }
             }
         }

packages/ssr/tests/hydration.rs

@@ -11,7 +11,7 @@ fn root_ids() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"></div>"#
     );
 }
 
@@ -29,7 +29,7 @@ fn dynamic_attributes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"><div style="width:123px;" data-node-hydration="2"></div></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1"></div></div>"#
     );
 }
 
@@ -46,7 +46,7 @@ fn listeners() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"><div data-node-hydration="2,click:1"></div></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"><div data-node-hydration="1,click:1"></div></div>"#
     );
 
     fn app2(cx: Scope) -> Element {
@@ -61,7 +61,7 @@ fn listeners() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"><div style="width:123px;" data-node-hydration="2,click:1"></div></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1,click:1"></div></div>"#
     );
 }
 
@@ -79,7 +79,7 @@ fn text_nodes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div data-node-hydration="1"><!--node-id2-->hello<!--#--></div>"#
+        r#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
     );
 
     fn app2(cx: Scope) -> Element {
@@ -94,7 +94,85 @@ fn text_nodes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div data-node-hydration="1"><!--node-id3-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
+        r#"<div data-node-hydration="0"><!--node-id1-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
+    );
+}
+
+#[test]
+fn components_hydrate() {
+    fn app(cx: Scope) -> Element {
+        render! { Child {} }
+    }
+
+    fn Child(cx: Scope) -> Element {
+        render! { div { "hello" } }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div data-node-hydration="0">hello</div>"#
+    );
+
+    fn app2(cx: Scope) -> Element {
+        render! { Child2 {} }
+    }
+
+    fn Child2(cx: Scope) -> Element {
+        let dyn_text = "hello";
+        render! {
+            div { dyn_text }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app2);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
+    );
+
+    fn app3(cx: Scope) -> Element {
+        render! { Child3 {} }
+    }
+
+    fn Child3(cx: Scope) -> Element {
+        render! { div { width: "{1}" } }
+    }
+
+    let mut dom = VirtualDom::new(app3);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div style="width:1;" data-node-hydration="0"></div>"#
+    );
+
+    fn app4(cx: Scope) -> Element {
+        render! { Child4 {} }
+    }
+
+    fn Child4(cx: Scope) -> Element {
+        render! {
+            for _ in 0..2 {
+                render! {
+                    render! {
+                        "{1}"
+                    }
+                }
+            }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app4);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<!--node-id0-->1<!--#--><!--node-id1-->1<!--#-->"#
     );
 }
 
@@ -115,6 +193,6 @@ fn hello_world_hydrates() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<h1 data-node-hydration="1"><!--node-id2-->High-Five counter: 0<!--#--></h1><button data-node-hydration="3,click:1">Up high!</button><button data-node-hydration="4,click:1">Down low!</button>"#
+        r#"<h1 data-node-hydration="0"><!--node-id1-->High-Five counter: 0<!--#--></h1><button data-node-hydration="2,click:1">Up high!</button><button data-node-hydration="3,click:1">Down low!</button>"#
     );
 }

packages/ssr/tests/simple.rs

@@ -47,9 +47,7 @@ fn dynamic() {
 fn components() {
     #[component]
     fn MyComponent(cx: Scope, name: i32) -> Element {
-        render! {
-            div { "component {name}" }
-        }
+        render! { div { "component {name}" } }
     }
 
     assert_eq!(