yew SSR 服务器端渲染 - 云上于天 - 泥芹

NiQin (blog: 泥芹) shared the aphorism --

任何没有创新思路的求变与激进，都只不过是一场苍白无力的存生挣扎。 -- 佚名

[WebAssembly] yew SSR 服务器端渲染

2022-02-22 20:02:58+08:00 by - NiQin [blog: 泥芹]

💥 内容涉及著作权，均归属作者本人。若非作者注明，默认欢迎转载：请注明出处，及相关链接。

Summary: `Yew` 的服务器端渲染（SSR，Server-side Rendering）方案还处于实验性质，但技术概念非常棒：通过极少的工作，即可构建一个与客户端无关的 SSR 应用。虽然有些功能还未完善，但已经初具端倪，可以使用于静态网站的构建了。启用 `Yew` 的 SSR 方案，需要使用开发版本，目前最新版本（0.19.3）不支持。

Topics: rust webassembly tide wasm yew actix-web async-std surf ssr tokio warp reqwest

Yew 是 wasm（WebAssembly）框架，可谓 Rust 生态中最受关注的项目之一，github 点赞数量接近 20k。其性能在和其它 js 前端库评测中，也很出彩。多个评测文章中，可以和轻量级的 preact 等性能等同，相较于 react.js 和 vue.js，具有多方面的优势。

感兴趣的请参阅文章：

默认情况下，Yew 组件仅在客户端渲染。当浏览者访问网站时，服务器会向浏览器发送一个没有任何实际内容的框架 html 文件，以及一个 WebAssembly 包。所有需要展现的内容，都是由 WebAssembly 包在客户端呈现的。

这种方法适用于大多数网站，但有几点不足：

在下载整个 WebAssembly 绑定包并完成初始渲染之前，用户将无法看到任何内容。这点就受限于网络，有些用户可能体验不佳。
最大的问题是搜索引擎。一些搜索引擎不支持动态呈现的 web 内容，即使在支持的搜索引擎中，搜索排名也是比较低的。目前，笔者使用 yew 也开发了几个 wasm 应用：对于图像处理、数据可视化等，涉及搜索较少，搜索引擎的问题可以忽略；对于 web——有些朋友可能要说这个不是 wasm 的适宜场景——但很多开发者（包括笔者）不这样认为，因此也是用 yew 开发了一个实验性的博客应用。google 搜索收录，关键词读取，问题不大。但有些评测文章中的支持 js 页面动态渲染的 bing、yandex 等境外众多搜索引擎，并不能收录，或许是因为 wasm 绑定包和 js 动态渲染处理不同。至于国内的，表现更差。再者，即使 google 可以搜索收录，但缓存是读不到任何内容的（包括文字版缓存）。

在此不必纠结于技术细节，总之因以上原因，yew 社区中，对于 SSR 的呼声一直较高。2019 年，即有一个专门的 github/project 主题，是 SSR 方案的讨论。

为了解决上述问题，yew 终于有了解决方案，最早可能将于下一代版本（0.20.x）中发布，将可以在服务器端呈现我网站。虽说 Yew 的服务器端渲染（SSR，Server-side Rendering）方案还处于实验性质，但技术概念非常棒：通过极少的工作，即可构建一个与客户端无关的 SSR 应用。虽然有些功能还未完善，但已经初具端倪，可以使用于静态网站的构建了。

是挺令 Rust 爱好者兴奋的（此处应有掌声 :-)))）！

笔者对于当前的初步 SSR 方案，进行了浅尝，体验很棒——代码改动极少，可以具体到一句话：通过 ServerRenderer 渲染器包裹你当前的 yew 主入口组件即可。

我们开始吧，作为服务器的分别是：tide、actix-web，以及 warp。展现的数据，通过读取 rest API 来获取。

启用 Yew 的 SSR 方案，需要使用开发版本，目前最新版本（0.19.3）不支持。

`yew` 服务器端渲染（SSR，Server-side Rendering）的概念和原理

SSR 如何工作？

如上文所述，yew 提供了一个服务器渲染器 ServerRenderer，以渲染服务器端页面。

比如，你现有的 wasm 入口，即为 yew::start_app::<App>(); 的这个 App 组件。我们要对其做服务器端渲染：首先使用 ServerRenderer::<App>::new() 创建一个渲染器，然后调用 renderer.render().await。如此简单，即可完成服务器端渲染。

如下代码为笔者的 wasm 入口组件：

struct App;

impl Component for App {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <BrowserRouter>
                <Header />

                <main class="ps-relative t64">
                    <Switch<Routes> render={ Switch::render(switch) } />
                </main>

                <Copyright />

                <LoadJs />
            </BrowserRouter>
        }
    }
}

fn main() {
    set_panic_hook();

    yew::start_app::<App>();
}

如何对其渲染？增加一个方法即可：

struct App;

impl Component for App {
        // 与上文代码相同
}

// 1、增加异步运行时属性
#[async_std::main] // 或者 #[tokio::main]
// 2、声明为异步方法
async fn main() {
    // 3、创建一个渲染器
    let renderer = ServerRenderer::<App>::new();
    // 4、对 wasm 入口组件进行渲染
    let rendered = renderer.render().await;

    println!("{}", rendered);
}

笔者的 yew 项目源码在 surfer/frontend-yew，你可以下载后运行。或许你只是想尝试一下，请直接复制下端代码：

use yew::prelude::*;
use yew::ServerRenderer;

#[function_component]
fn App() -> Html {
    html! {<div>{"Hello, World!"}</div>}
}

#[tokio::main]
async fn main() {
    let renderer = ServerRenderer::<App>::new();

    let rendered = renderer.render().await;

    // Prints: <div>Hello, World!</div>
    println!("{}", rendered);
}

代码迭代时极为精简吧！

组件生命周期（Component Lifecycle）

yew 的服务器端渲染中，推荐使用函数组件（function components）。

钩子（hooks）中，use_effect 以及 use_effect_with_deps 将不能正常工作。其它所有的钩子（hooks）都可以正常使用，直到组件第一次呈现为 html。

Web APIs 将不可用。如果你想使用 web_sys ，请注意逻辑隔离。

推荐使用函数组件（function components）。虽然结构体组件（Struct Components）在服务器端渲染时仍然可用，但安全逻辑界限不明显，所以推荐使用函数组件（function components）。

服务器端渲染时的数据获取

数据获取，是服务器端渲染的基础功能，但也是重点和难点。目前，yew 试图使用组件 <Suspense /> 解决此问题。

概念和原理就简化到这个地步吧，毕竟目前还是实验性质的，后续的改动或许完全不同。

我们上面说到服务器端渲染时的数据读取，这个是互联网应用的最基础功能。我们接下来，通过读取公开的 github 和 httpbin 的 REST API，来演示 yew 中，如何在服务器端渲染时，异步读取并展示数据。

`yew` + `tide` + `surf` 组合的 yew ssr 示例

代码很简单并清晰，仅作几点说明：

使用 State 来异步读取后端数据。
使用钩子（hooks），返回 SuspensionResult 来渲染页面，展示数据。
上文所述，渲染的数据格式是字符串（String），因此要转换为 tide 服务器的 html 数据类型 tide::Result。下问不同服务器类同，不再赘述。

再次说明：启用 Yew 的 SSR 方案，需要使用开发版本，目前最新版本（0.19.3）不支持。

`Cargo.toml`

[package]
name = "yew-ssr-tide"
version = "0.0.1"
edition = "2021"

[dependencies]
async-std = { version = "1.10.0", features = ["attributes"] }
tide = "0.17.0-beta.1"
yew = { path = "../../../packages/yew", features = ["ssr"] }

surf = "2.3.2"
serde = { version = "1.0.136", features = ["derive"] }

因为现在是作为 `bin` 应用，所以一个 `main.rs` 文件即可

use std::cell::RefCell;
use std::rc::Rc;

use async_std::task;
use serde::{Deserialize, Serialize};
use tide::{http::mime, Request, Response, StatusCode};

use yew::prelude::*;
use yew::suspense::{Suspension, SuspensionResult};

#[derive(Serialize, Deserialize, Clone)]
struct UserResponse {
    login: String,
    name: String,
    blog: String,
    location: String,
}

async fn fetch_user() -> UserResponse {
    // surf works for both non-wasm and wasm targets.
    let mut resp = surf::get("https://api.github.com/users/zzy")
        .header("User-Agent", "request")
        .await
        .unwrap();
    println!("Status: {:#?}", resp.status());

    let user_resp: UserResponse = resp.body_json().await.unwrap();

    user_resp
}

pub struct UserState {
    susp: Suspension,
    value: Rc<RefCell<Option<UserResponse>>>,
}

impl UserState {
    fn new() -> Self {
        let (susp, handle) = Suspension::new();
        let value: Rc<RefCell<Option<UserResponse>>> = Rc::default();

        {
            let value = value.clone();
            // we use async-std spawn local here.
            task::spawn_local(async move {
                let user = fetch_user().await;
                {
                    let mut value = value.borrow_mut();
                    *value = Some(user);
                }

                handle.resume();
            });
        }

        Self { susp, value }
    }
}

#[hook]
fn use_user() -> SuspensionResult<UserResponse> {
    let user_state = use_state(UserState::new);

    let result = match *user_state.value.borrow() {
        Some(ref user) => Ok(user.clone()),
        None => Err(user_state.susp.clone()),
    };

    result
}

#[function_component]
fn Content() -> HtmlResult {
    let user = use_user()?;

    Ok(html! {
        <div>
            <div>{"Login name: "}{ user.login }</div>
            <div>{"User name: "}{ user.name }</div>
            <div>{"Blog: "}{ user.blog }</div>
            <div>{"Location: "}{ user.location }</div>
        </div>
    })
}

#[function_component]
fn App() -> Html {
    let fallback = html! {<div>{"Loading..."}</div>};

    html! {
        <Suspense {fallback}>
            <Content />
        </Suspense>
    }
}

async fn render(_: Request<()>) -> tide::Result {
    let content = task::spawn_blocking(move || {
        task::block_on(async {
            let renderer = yew::ServerRenderer::<App>::new();

            renderer.render().await
        })
    })
    .await;

    let resp_content = format!(
        r#"<!DOCTYPE HTML>
            <html>
                <head>
                    <title>yew-ssr with tide example</title>
                </head>
                <body>
                    <h1>yew-ssr with tide example</h1>
                    {}
                </body>
            </html>
            "#,
        content
    );

    let mut resp = Response::new(StatusCode::Ok);
    resp.set_body(resp_content);
    resp.set_content_type(mime::HTML);

    Ok(resp.into())
}

#[async_std::main]
async fn main() -> Result<(), std::io::Error> {
    let mut server = tide::new();
    server.at("/").get(render);
    println!("You can view the website at: http://localhost:8080");
    server.listen("127.0.0.1:8080").await?;
    Ok(())
}

如何运行？

上文提到，现在是作为一个 bin 应用，因此 cargo run 后，浏览器中打开 http://localhost:8080/ 即可看到读取的 github REST API 公开数据。

本工程完整代码在 github/yew-ssr-tide。

第二个出场的是 yew + actix-web + reqwest 代表队

注意的地方和上一个 tide 示例相同，区别就在于 async-std、tide，以及 surf 的代码 API。

`Cargo.toml`

[package]
name = "yew-ssr-actix-web"
version = "0.0.1"
edition = "2021"

[dependencies]
tokio = { version = "1.17.0", features = ["full"] }
actix-web = "4.0.0-rc.1"
yew = { path = "../../../packages/yew", features = ["ssr"] }

reqwest = { version = "0.11.9", features = ["json"] }
serde = { version = "1.0.136", features = ["derive"] }

`main.rs`

use std::cell::RefCell;
use std::rc::Rc;

use actix_web::{get, App as ActixApp, Error, HttpResponse, HttpServer};
use tokio::task::LocalSet;
use tokio::task::{spawn_blocking, spawn_local};

use serde::{Deserialize, Serialize};

use yew::prelude::*;
use yew::suspense::{Suspension, SuspensionResult};

#[derive(Serialize, Deserialize, Clone)]
struct UserResponse {
    login: String,
    name: String,
    blog: String,
    location: String,
}

async fn fetch_user() -> UserResponse {
    // reqwest works for both non-wasm and wasm targets.
    let resp = reqwest::Client::new()
        .get("https://api.github.com/users/zzy")
        .header("User-Agent", "request")
        .send()
        .await
        .unwrap();
    println!("Status: {}", resp.status());
    
    let user_resp = resp.json::<UserResponse>().await.unwrap();

    user_resp
}

pub struct UserState {
    susp: Suspension,
    value: Rc<RefCell<Option<UserResponse>>>,
}

impl UserState {
    fn new() -> Self {
        let (susp, handle) = Suspension::new();
        let value: Rc<RefCell<Option<UserResponse>>> = Rc::default();

        {
            let value = value.clone();
            // we use tokio spawn local here.
            spawn_local(async move {
                let user = fetch_user().await;
                {
                    let mut value = value.borrow_mut();
                    *value = Some(user);
                }

                handle.resume();
            });
        }

        Self { susp, value }
    }
}

#[hook]
fn use_user() -> SuspensionResult<UserResponse> {
    let user_state = use_state(UserState::new);

    let result = match *user_state.value.borrow() {
        Some(ref user) => Ok(user.clone()),
        None => Err(user_state.susp.clone()),
    };

    result
}

#[function_component]
fn Content() -> HtmlResult {
    let user = use_user()?;

    Ok(html! {
        <div>
            <div>{"Login name: "}{ user.login }</div>
            <div>{"User name: "}{ user.name }</div>
            <div>{"Blog: "}{ user.blog }</div>
            <div>{"Location: "}{ user.location }</div>
        </div>
    })
}

#[function_component]
fn App() -> Html {
    let fallback = html! {<div>{"Loading..."}</div>};

    html! {
        <Suspense {fallback}>
            <Content />
        </Suspense>
    }
}

#[get("/")]
async fn render() -> Result<HttpResponse, Error> {
    let content = spawn_blocking(move || {
        use tokio::runtime::Builder;
        let set = LocalSet::new();

        let rt = Builder::new_current_thread().enable_all().build().unwrap();

        set.block_on(&rt, async {
            let renderer = yew::ServerRenderer::<App>::new();

            renderer.render().await
        })
    })
    .await
    .expect("the thread has failed.");

    Ok(HttpResponse::Ok()
        .content_type("text/html; charset=utf-8")
        .body(format!(
            r#"<!DOCTYPE HTML>
                <html>
                    <head>
                        <title>yew-ssr with actix-web example</title>
                    </head>
                    <body>
                        <h1>yew-ssr with actix-web example</h1>
                        {}
                    </body>
                </html>
            "#,
            content
        )))
}

#[actix_web::main] // or #[tokio::main]
async fn main() -> std::io::Result<()> {
    let server = HttpServer::new(|| ActixApp::new().service(render));
    println!("You can view the website at: http://localhost:8080/");
    server.bind(("127.0.0.1", 8080))?.run().await
}

运行方式同 tide。

本工程完整代码在 github/yew-ssr-actix-web。

yew + warp + reqwest

注意的地方和上一个 tide 示例相同，区别就在于 async-std、tide，以及 surf 的代码 API。

`Cargo.toml`

[package]
name = "yew-ssr-warp"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
tokio = { version = "1.17.0", features = ["full"] }
warp = "0.3.2"
yew = { path = "../../../packages/yew", features = ["ssr"] }
reqwest = { version = "0.11.9", features = ["json"] }
serde = { version = "1.0.136", features = ["derive"] }
uuid = { version = "0.8.2", features = ["serde"] }

`main.rs`

use std::cell::RefCell;
use std::rc::Rc;

use serde::{Deserialize, Serialize};
use tokio::task::LocalSet;
use tokio::task::{spawn_blocking, spawn_local};
use uuid::Uuid;
use warp::Filter;
use yew::prelude::*;
use yew::suspense::{Suspension, SuspensionResult};

#[derive(Serialize, Deserialize)]
struct UuidResponse {
    uuid: Uuid,
}

async fn fetch_uuid() -> Uuid {
    // reqwest works for both non-wasm and wasm targets.
    let resp = reqwest::get("https://httpbin.org/uuid").await.unwrap();
    println!("Status: {}", resp.status());
    
    let uuid_resp = resp.json::<UuidResponse>().await.unwrap();

    uuid_resp.uuid
}

pub struct UuidState {
    s: Suspension,
    value: Rc<RefCell<Option<Uuid>>>,
}

impl UuidState {
    fn new() -> Self {
        let (s, handle) = Suspension::new();
        let value: Rc<RefCell<Option<Uuid>>> = Rc::default();

        {
            let value = value.clone();
            // we use tokio spawn local here.
            spawn_local(async move {
                let uuid = fetch_uuid().await;

                {
                    let mut value = value.borrow_mut();
                    *value = Some(uuid);
                }

                handle.resume();
            });
        }

        Self { s, value }
    }
}

impl PartialEq for UuidState {
    fn eq(&self, rhs: &Self) -> bool {
        self.s == rhs.s
    }
}

#[hook]
fn use_random_uuid() -> SuspensionResult<Uuid> {
    let s = use_state(UuidState::new);

    let result = match *s.value.borrow() {
        Some(ref m) => Ok(*m),
        None => Err(s.s.clone()),
    };

    result
}

#[function_component]
fn Content() -> HtmlResult {
    let uuid = use_random_uuid()?;

    Ok(html! {
        <div>{"Random UUID: "}{uuid}</div>
    })
}

#[function_component]
fn App() -> Html {
    let fallback = html! {<div>{"Loading..."}</div>};

    html! {
        <Suspense {fallback}>
            <Content />
        </Suspense>
    }
}

async fn render() -> String {
    let content = spawn_blocking(move || {
        use tokio::runtime::Builder;
        let set = LocalSet::new();

        let rt = Builder::new_current_thread().enable_all().build().unwrap();

        set.block_on(&rt, async {
            let renderer = yew::ServerRenderer::<App>::new();

            renderer.render().await
        })
    })
    .await
    .expect("the thread has failed.");

    format!(
        r#"<!DOCTYPE HTML>
<html>
    <head>
        <title>Yew SSR Example</title>
    </head>
    <body>
        {}
    </body>
</html>
"#,
        content
    )
}

#[tokio::main]
async fn main() {
    let routes = warp::any().then(|| async move { warp::reply::html(render().await) });

    println!("You can view the website at: http://localhost:8080/");

    warp::serve(routes).run(([127, 0, 0, 1], 8080)).await;
}

运行方式同 tide。

此文仅是简单的模板示例分享，笔者将要对已经开发的 wasm 博客进行服务器端渲染的改造，以和 handlebars-rust 模板开发进行体验和比较。以后若有体会，再与各位朋友分享。

谢谢您的阅读！