dioxus_leptos_ssr_bench.rs

use criterion::*;

criterion_group!(benches, leptos_ssr_bench, dioxus_ssr_bench);
criterion_main!(benches);

fn leptos_ssr_bench(c: &mut Criterion) {
    use leptos::*;
    let r = create_runtime();
    c.bench_function("leptos ssr", |b| {
        b.iter(|| {
			leptos::leptos_dom::HydrationCtx::reset_id();
			#[component]
			fn Counter(initial: i32) -> impl IntoView {
				let (value, set_value) = create_signal(initial);
				view! {
					<div>
						<button on:click=move |_| set_value.update(|value| *value -= 1)>"-1"</button>
						<span>"Value: " {move || value().to_string()} "!"</span>
						<button on:click=move |_| set_value.update(|value| *value += 1)>"+1"</button>
					</div>
				}
			}

			let rendered = view! { 
				<main>
					<h1>"Welcome to our benchmark page."</h1>
					<p>"Here's some introductory text."</p>
					<Counter initial=1/>
					<Counter initial=2/>
					<Counter initial=3/>
				</main>
			}.into_view().render_to_string();

			assert_eq!(
				rendered,
"<main data-hk=\"0-0-0-1\"><h1 data-hk=\"0-0-0-2\">Welcome to our benchmark page.</h1><p data-hk=\"0-0-0-3\">Here&#x27;s some introductory text.</p><div data-hk=\"0-0-0-5\"><button data-hk=\"0-0-0-6\">-1</button><span data-hk=\"0-0-0-7\">Value: <!>1<!--hk=0-0-0-8-->!</span><button data-hk=\"0-0-0-9\">+1</button></div><!--hk=0-0-0-4--><div data-hk=\"0-0-0-11\"><button data-hk=\"0-0-0-12\">-1</button><span data-hk=\"0-0-0-13\">Value: <!>2<!--hk=0-0-0-14-->!</span><button data-hk=\"0-0-0-15\">+1</button></div><!--hk=0-0-0-10--><div data-hk=\"0-0-0-17\"><button data-hk=\"0-0-0-18\">-1</button><span data-hk=\"0-0-0-19\">Value: <!>3<!--hk=0-0-0-20-->!</span><button data-hk=\"0-0-0-21\">+1</button></div><!--hk=0-0-0-16--></main>"			);
        });
    });
    r.dispose();
}

fn dioxus_ssr_bench(c: &mut Criterion) {
    use dioxus::prelude::*;
    c.bench_function("dioxus ssr", |b| {
        let mut renderer = dioxus_ssr::Renderer::new();
        renderer.pre_render = true;
        b.iter(move || {
            #[component]
            fn Counter(initial: i32) -> Element {
                let mut val = use_signal(|| 0);
                rsx! {
                    div {
                        button { onclick: move |_| val -= 1, "-1" }
                        span { "Value: {val}!" }
                        button { onclick: move |_| val += 1, "+1" }
                    }
                }
            }

            fn app() -> Element {
                rsx! {
                    main {
                        h1 { "Welcome to our benchmark page." }
                        p { "Here's some introductory text." }
                        Counter { initial: 1 }
                        Counter { initial: 2 }
                        Counter { initial: 3 }
                    }
                }
            }
        
            let mut vdom = VirtualDom::new(app);
            vdom.rebuild_in_place();

            let html = renderer.render(&vdom);

            assert_eq!(
                html,
        "<main data-node-hydration=\"0\"><h1>Welcome to our benchmark page.</h1><p>Here&#x27;s some introductory text.</p><div data-node-hydration=\"1\"><button data-node-hydration=\"2,click:1\">-1</button><span><!--node-id3-->Value: 0!<!--#--></span><button data-node-hydration=\"4,click:1\">+1</button></div><div data-node-hydration=\"5\"><button data-node-hydration=\"6,click:1\">-1</button><span><!--node-id7-->Value: 0!<!--#--></span><button data-node-hydration=\"8,click:1\">+1</button></div><div data-node-hydration=\"9\"><button data-node-hydration=\"10,click:1\">-1</button><span><!--node-id11-->Value: 0!<!--#--></span><button data-node-hydration=\"12,click:1\">+1</button></div></main>"			);
        });
    });
}