服务器端渲染(SSR)
为了在渲染过程中获得更低层次的控制,你可以直接使用dioxus-ssr
包。当需要与dioxus-fullstack
不支持的Web框架集成,或者预渲染页面时,这非常有用。
设置
在这个指南中,我们将展示如何将Dioxus SSR与Axum一起使用。
确保你已经安装了Rust和Cargo,然后创建一个新项目:
sql
cargo new --bin demo
cd demo
添加Dioxus和SSR渲染器作为依赖项:
sql
cargo add dioxus@0.5.0
cargo add dioxus-ssr@0.5.0
接下来,添加所有Axum依赖项。如果你使用的是不同的Web框架,这将会有所不同:
sql
cargo add tokio --features full
cargo add axum
你的依赖项应该大致如下所示:
ini
[dependencies]
axum = "0.7"
dioxus = { version = "*" }
dioxus-ssr = { version = "*" }
tokio = { version = "1.15.0", features = ["full"] }
现在,设置你的Axum应用以响应一个端点。
rust
use axum::{response::Html, routing::get, Router};
use dioxus::prelude::*;
#[tokio::main]
async fn main() {
let listener = tokio::net::TcpListener::bind("127.0.0.1:3000")
.await
.unwrap();
println!("listening on http://127.0.0.1:3000");
axum::serve(
listener,
Router::new()
.route("/", get(app_endpoint))
.into_make_service(),
)
.await
.unwrap();
}
然后添加我们的端点。我们可以直接渲染rsx!
:
rust
async fn app_endpoint() -> Html<String> {
// 将rsx!宏渲染为HTML
Html(dioxus_ssr::render_element(rsx! { div { "hello world!" } }))
}
或者我们可以渲染VirtualDoms。
rust
async fn app_endpoint() -> Html<String> {
// 创建一个渲染包含文本 "hello world" 的div的组件
fn app() -> Element {
rsx! { div { "hello world" } }
}
// 创建一个包含app组件的VirtualDom
let mut app = VirtualDom::new(app);
// 在渲染之前重建VirtualDom
app.rebuild_in_place();
// 将VirtualDom渲染为HTML
Html(dioxus_ssr::render(&app))
}
最后,你可以使用cargo run
而不是dx serve
来运行它。
多线程支持
遗憾的是,Dioxus的VirtualDom目前不是Send
。在内部,我们使用了很多内部可变性,这不是线程安全的。当使用需要Send
的Web框架工作时,可以将VirtualDom立即渲染为字符串------但你不能在await点持有VirtualDom。对于保留状态的SSR(本质上是LiveView),你需要在自己的线程上生成一个VirtualDom,并通过通道与之通信,或者创建一个VirtualDom池。你可能会发现你不能在await点持有VirtualDom。因为Dioxus目前不是ThreadSafe,它必须保留在它开始的线程上。我们正在努力放宽这一要求。