Dioxus框架中服务器端渲染(Server-Side Rendering,简称SSR)

服务器端渲染(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,它必须保留在它开始的线程上。我们正在努力放宽这一要求。

相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj3 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵5 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld5 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷7 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军7 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离7 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库