Introduce additional information in SSR artifact to facilitate Hydration

packages/yew/src/html/component/scope.rs

@@ -205,7 +205,12 @@ mod feat_ssr {
     };
 
     impl<COMP: BaseComponent> Scope<COMP> {
-        pub(crate) async fn render_to_string(self, w: &mut String, props: Rc<COMP::Properties>) {
+        pub(crate) async fn render_to_string(
+            self,
+            w: &mut String,
+            props: Rc<COMP::Properties>,
+            hydratable: bool,
+        ) {
             let (tx, rx) = oneshot::channel();
             let state = ComponentRenderState::Ssr { sender: Some(tx) };
 
@@ -222,10 +227,26 @@ mod feat_ssr {
             );
             scheduler::start();
 
+            if hydratable {
+                #[cfg(debug_assertions)]
+                w.push_str(&format!("<!--<[{}]>-->", std::any::type_name::<COMP>()));
+
+                #[cfg(not(debug_assertions))]
+                w.push_str("<!--<[]>-->");
+            }
+
             let html = rx.await.unwrap();
 
             let self_any_scope = AnyScope::from(self.clone());
-            html.render_to_string(w, &self_any_scope).await;
+            html.render_to_string(w, &self_any_scope, hydratable).await;
+
+            if hydratable {
+                #[cfg(debug_assertions)]
+                w.push_str(&format!("<!--</[{}]>-->", std::any::type_name::<COMP>()));
+
+                #[cfg(not(debug_assertions))]
+                w.push_str("<!--</[]>-->");
+            }
 
             scheduler::push_component_destroy(Box::new(DestroyRunner {
                 state: self.state.clone(),

packages/yew/src/server_renderer.rs

@@ -10,6 +10,7 @@ where
     ICOMP: IntoComponent,
 {
     props: ICOMP::Properties,
+    hydratable: bool,
 }
 
 impl<ICOMP> Default for ServerRenderer<ICOMP>
@@ -39,7 +40,20 @@ where
 {
     /// Creates a [ServerRenderer] with custom properties.
     pub fn with_props(props: ICOMP::Properties) -> Self {
-        Self { props }
+        Self {
+            props,
+            hydratable: true,
+        }
+    }
+
+    /// Sets whether an the rendered result is hydratable.
+    ///
+    /// Defaults to `true`.
+    ///
+    /// When this is sets to `true`, the rendered artifact will include assistive nodes
+    /// to assist with the hydration process.
+    pub fn set_hydratable(&mut self, val: bool) {
+        self.hydratable = val;
     }
 
     /// Renders Yew Application.
@@ -54,6 +68,8 @@ where
     /// Renders Yew Application to a String.
     pub async fn render_to_string(self, w: &mut String) {
         let scope = Scope::<<ICOMP as IntoComponent>::Component>::new(None);
-        scope.render_to_string(w, self.props.into()).await;
+        scope
+            .render_to_string(w, self.props.into(), self.hydratable)
+            .await;
     }
 }

packages/yew/src/virtual_dom/vcomp.rs

@@ -67,6 +67,7 @@ pub(crate) trait Mountable {
         &'a self,
         w: &'a mut String,
         parent_scope: &'a AnyScope,
+        hydratable: bool,
     ) -> LocalBoxFuture<'a, ()>;
 }
 
@@ -113,10 +114,13 @@ impl<COMP: BaseComponent> Mountable for PropsWrapper<COMP> {
         &'a self,
         w: &'a mut String,
         parent_scope: &'a AnyScope,
+        hydratable: bool,
     ) -> LocalBoxFuture<'a, ()> {
         async move {
             let scope: Scope<COMP> = Scope::new(Some(parent_scope.clone()));
-            scope.render_to_string(w, self.props.clone()).await;
+            scope
+                .render_to_string(w, self.props.clone(), hydratable)
+                .await;
         }
         .boxed_local()
     }
@@ -206,10 +210,15 @@ mod feat_ssr {
     use crate::html::AnyScope;
 
     impl VComp {
-        pub(crate) async fn render_to_string(&self, w: &mut String, parent_scope: &AnyScope) {
+        pub(crate) async fn render_to_string(
+            &self,
+            w: &mut String,
+            parent_scope: &AnyScope,
+            hydratable: bool,
+        ) {
             self.mountable
                 .as_ref()
-                .render_to_string(w, parent_scope)
+                .render_to_string(w, parent_scope, hydratable)
                 .await;
         }
     }

packages/yew/src/virtual_dom/vlist.rs

@@ -90,12 +90,17 @@ mod feat_ssr {
     use crate::html::AnyScope;
 
     impl VList {
-        pub(crate) async fn render_to_string(&self, w: &mut String, parent_scope: &AnyScope) {
+        pub(crate) async fn render_to_string(
+            &self,
+            w: &mut String,
+            parent_scope: &AnyScope,
+            hydratable: bool,
+        ) {
             // Concurrently render all children.
             for fragment in futures::future::join_all(self.children.iter().map(|m| async move {
                 let mut w = String::new();
 
-                m.render_to_string(&mut w, parent_scope).await;
+                m.render_to_string(&mut w, parent_scope, hydratable).await;
 
                 w
             }))
@@ -123,7 +128,8 @@ mod ssr_tests {
             html! { <div>{"Hello "}{s}{"!"}</div> }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 
@@ -153,7 +159,8 @@ mod ssr_tests {
             }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 

packages/yew/src/virtual_dom/vnode.rs

@@ -157,13 +157,20 @@ mod feat_ssr {
             &'a self,
             w: &'a mut String,
             parent_scope: &'a AnyScope,
+            hydratable: bool,
         ) -> LocalBoxFuture<'a, ()> {
             async move {
                 match self {
-                    VNode::VTag(vtag) => vtag.render_to_string(w, parent_scope).await,
-                    VNode::VText(vtext) => vtext.render_to_string(w).await,
-                    VNode::VComp(vcomp) => vcomp.render_to_string(w, parent_scope).await,
-                    VNode::VList(vlist) => vlist.render_to_string(w, parent_scope).await,
+                    VNode::VTag(vtag) => vtag.render_to_string(w, parent_scope, hydratable).await,
+                    VNode::VText(vtext) => {
+                        vtext.render_to_string(w, parent_scope, hydratable).await
+                    }
+                    VNode::VComp(vcomp) => {
+                        vcomp.render_to_string(w, parent_scope, hydratable).await
+                    }
+                    VNode::VList(vlist) => {
+                        vlist.render_to_string(w, parent_scope, hydratable).await
+                    }
                     // We are pretty safe here as it's not possible to get a web_sys::Node without DOM
                     // support in the first place.
                     //
@@ -175,7 +182,9 @@ mod feat_ssr {
                     // Portals are not rendered.
                     VNode::VPortal(_) => {}
                     VNode::VSuspense(vsuspense) => {
-                        vsuspense.render_to_string(w, parent_scope).await
+                        vsuspense
+                            .render_to_string(w, parent_scope, hydratable)
+                            .await
                     }
                 }
             }

packages/yew/src/virtual_dom/vsuspense.rs

@@ -30,9 +30,24 @@ mod feat_ssr {
     use crate::html::AnyScope;
 
     impl VSuspense {
-        pub(crate) async fn render_to_string(&self, w: &mut String, parent_scope: &AnyScope) {
+        pub(crate) async fn render_to_string(
+            &self,
+            w: &mut String,
+            parent_scope: &AnyScope,
+            hydratable: bool,
+        ) {
+            if hydratable {
+                w.push_str("<!--<?>-->");
+            }
+
             // always render children on the server side.
-            self.children.render_to_string(w, parent_scope).await;
+            self.children
+                .render_to_string(w, parent_scope, hydratable)
+                .await;
+
+            if hydratable {
+                w.push_str("<!--</?>-->");
+            }
         }
     }
 }
@@ -120,7 +135,8 @@ mod ssr_tests {
 
         let s = local
             .run_until(async move {
-                let renderer = ServerRenderer::<Comp>::new();
+                let mut renderer = ServerRenderer::<Comp>::new();
+                renderer.set_hydratable(false);
 
                 renderer.render().await
             })

packages/yew/src/virtual_dom/vtag.rs

@@ -418,8 +418,19 @@ mod feat_ssr {
     use crate::{html::AnyScope, virtual_dom::VText};
     use std::fmt::Write;
 
+    // Elements that cannot have any child elements.
+    static VOID_ELEMENTS: &[&str; 14] = &[
+        "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param",
+        "source", "track", "wbr",
+    ];
+
     impl VTag {
-        pub(crate) async fn render_to_string(&self, w: &mut String, parent_scope: &AnyScope) {
+        pub(crate) async fn render_to_string(
+            &self,
+            w: &mut String,
+            parent_scope: &AnyScope,
+            hydratable: bool,
+        ) {
             write!(w, "<{}", self.tag()).unwrap();
 
             let write_attr = |w: &mut String, name: &str, val: Option<&str>| {
@@ -450,7 +461,9 @@ mod feat_ssr {
                 VTagInner::Input(_) => {}
                 VTagInner::Textarea { .. } => {
                     if let Some(m) = self.value() {
-                        VText::new(m.to_owned()).render_to_string(w).await;
+                        VText::new(m.to_owned())
+                            .render_to_string(w, parent_scope, hydratable)
+                            .await;
                     }
 
                     w.push_str("</textarea>");
@@ -460,9 +473,14 @@ mod feat_ssr {
                     ref children,
                     ..
                 } => {
-                    children.render_to_string(w, parent_scope).await;
+                    if !VOID_ELEMENTS.contains(&tag.as_ref()) {
+                        children.render_to_string(w, parent_scope, hydratable).await;
 
-                    write!(w, "</{}>", tag).unwrap();
+                        write!(w, "</{}>", tag).unwrap();
+                    } else {
+                        // We don't write children of void elements nor closing tags.
+                        debug_assert!(children.is_empty(), "{} cannot have any children!", tag);
+                    }
                 }
             }
         }
@@ -483,7 +501,8 @@ mod ssr_tests {
             html! { <div></div> }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 
@@ -497,7 +516,8 @@ mod ssr_tests {
             html! { <div class="abc"></div> }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 
@@ -511,7 +531,8 @@ mod ssr_tests {
             html! { <div>{"Hello!"}</div> }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 
@@ -525,7 +546,8 @@ mod ssr_tests {
             html! { <div>{"Hello!"}<input value="abc" type="text" /></div> }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 
@@ -539,7 +561,8 @@ mod ssr_tests {
             html! { <textarea value="teststring" /> }
         }
 
-        let renderer = ServerRenderer::<Comp>::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
         let s = renderer.render().await;
 

packages/yew/src/virtual_dom/vtext.rs

@@ -34,9 +34,15 @@ impl PartialEq for VText {
 #[cfg(feature = "ssr")]
 mod feat_ssr {
     use super::*;
+    use crate::html::AnyScope;
 
     impl VText {
-        pub(crate) async fn render_to_string(&self, w: &mut String) {
+        pub(crate) async fn render_to_string(
+            &self,
+            w: &mut String,
+            _parent_scope: &AnyScope,
+            _hydratable: bool,
+        ) {
             html_escape::encode_text_to_string(&self.text, w);
         }
     }
@@ -46,16 +52,21 @@ mod feat_ssr {
 mod ssr_tests {
     use tokio::test;
 
-    use super::*;
+    use crate::prelude::*;
+    use crate::ServerRenderer;
 
     #[test]
     async fn test_simple_str() {
-        let vtext = VText::new("abc");
+        #[function_component]
+        fn Comp() -> Html {
+            html! { "abc" }
+        }
 
-        let mut s = String::new();
+        let mut renderer = ServerRenderer::<Comp>::new();
+        renderer.set_hydratable(false);
 
-        vtext.render_to_string(&mut s).await;
+        let s = renderer.render().await;
 
-        assert_eq!("abc", s.as_str());
+        assert_eq!(s, r#"abc"#);
     }
 }