资源

这个 crate 是更广泛的 Dioxus 生态系统的一部分。有关 Dioxus 的更多信息，请查看

• 入门指南
• 书籍
• 示例

概述

Dioxus SSR 提供将 Dioxus 组件渲染为有效 HTML 的实用程序。一旦渲染，HTML 可以在客户端重新激活或从您选择的 Web 服务器提供。

# use dioxus::prelude::*;
fn app() -> Element {
  rsx!{
    div {"hello world!"}
  }
}

let mut vdom = VirtualDom::new(app);
vdom.rebuild_in_place();

let text = dioxus_ssr::render(&vdom);
assert_eq!(text, "<div>hello world!</div>")

基本用法

最简单的例子是将一些 rsx! 节点渲染为 HTML。这可以通过 render_element API 完成。

# use dioxus::prelude::*;
let content = dioxus_ssr::render_element(rsx!{
    div {
        for i in 0..5 {
            "Number: {i}"
        }
    }
});

渲染虚拟 DOM

# use dioxus::prelude::*;
# fn app() -> Element { todo!() }
let mut vdom = VirtualDom::new(app);
vdom.rebuild_in_place();

let content = dioxus_ssr::render(&vdom);

在预渲染中的使用

此 crate 特别适用于在服务器端预生成页面，然后在客户端选择性地加载 Dioxus 以选择反应式元素。

此 crate 默认支持激活。但是，客户端和服务器必须生成完全相同的 VirtualDOM - 客户端假定预渲染的页面输出是相同的。为此，您需要确保您的 VirtualDOM 实现是确定性的！这可能涉及将我们的应用程序状态序列化并发送到客户端，仅激活页面的一部分，或构建测试以确保服务器上渲染的内容与客户端相同。

启用预渲染后，此 crate 将生成具有预关联元素 ID 的元素节点。在激活过程中，Dioxus-WebSys 渲染器将在页面查询后将这些虚拟节点附加到这些真实节点上。

要启用预渲染，只需将预渲染标志设置为true。

# use dioxus::prelude::*;
# fn App() -> Element { todo!() }
let mut vdom = VirtualDom::new(App);

vdom.rebuild_in_place();

let mut renderer = dioxus_ssr::Renderer::new();
renderer.pre_render = true;

let text = renderer.render(&vdom);

在服务器端渲染中的应用

Dioxus SSR 也可以用于服务器端渲染。您只需将 VirtualDOM 渲染成字符串并发送给客户端。

# use dioxus::prelude::*;
fn App() -> Element {
  rsx! { div { "hello world!" } }
}
let mut vdom = VirtualDom::new(App);
vdom.rebuild_in_place();
let text = dioxus_ssr::render(&vdom);
assert_eq!(text, "<div>hello world!</div>")

其余的空间——IE更有效地执行此操作，缓存 VirtualDom 等，目前都需要进行自定义实现。

在静态站点生成中的应用

Dioxus SSR 是生成静态站点的强大工具。使用 Dioxus 进行静态站点生成有点过度，但是。新的文档生成库 Doxie 实质上是强化版的 Dioxus SSR，专为具有客户端水解的静态站点生成设计。

再次，只需使用 render 或其他任何渲染方法将 VirtualDOM 渲染成字符串。